这个简单的 PrimeNG Angular 2 示例究竟是如何工作的？

Posted 2023-02-22

【中文标题】这个简单的 PrimeNG Angular 2 示例究竟是如何工作的？

【英文标题】：How exactly works this simple PrimeNG Angular 2 example?

【发布时间】：2018-01-19 23:26:57

【问题描述】：

我是 Angular 2\4 的新手（我来自 Java），我对使用 PrimeNG “组件”的 Angular 项目有以下疑问。

我按照这个快速的“Hello World”视频教程（在我看来是一个官方教程）创建了我的第一个示例，其中包含 PrimeNG 到我的 Angular 4 web 应用程序中：https://www.youtube.com/watch?v=6Nvze0dhzkE

我对这个例子的逻辑以及我最终如何重构它有一些疑问。

好吧，正如你所看到的那样：

<p-calendar [(ngModel)]="value"></p-calendar>
value | date:'dd.mm.yyyy'

与 PrimeNG 日历组件相关（我认为它是一个组件，因为据我所知自定义标签与组件相关联，是吗？如果我做错断言，请纠正我） .

我认为我没有这个组件的代码，而是我用 npm 下载的东西，应该放在我项目的 node_modules 目录中，是吗？

然后将app.module.ts文件修改成这样：

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  AppComponent  from './app.component';
import CalendarModule from 'primeng/primeng';
import FormsModule from '@angular/forms';
import BrowserAnimationsModule from '@angular/platform-browser/animations';


@NgModule(
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    CalendarModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

// ???
export class MyModel 
  value: Date;

我的疑惑主要和这个app.module.ts文件中声明的这个类有关：

导出类 MyModel 值：日期；

在我看来没用，我尝试删除，我的项目仍然有效。

那么在我看来，这条线到底是什么意思？

<p-calendar [(ngModel)]="value"></p-calendar>

我认为它应该将用户插入的值放入上一个 MyModel 类的 value 字段中，但似乎我遗漏了一些东西并且没有以这种方式工作。我错过了什么？

另一个疑问是，我可以这样做吗：

创建一个自定义组件，该组件将用作我的 app.component.html 视图中的自定义标记，类似于关联到 的 MyCustomCalendar 标签。

此组件视图应包含

其控制器应包含一个变量，该变量将使用选定的日期进行初始化。

我可以这样做吗？

【问题讨论】：

您在AppComponent 中有value 属性吗？还是您拥有的唯一 value 属性在 MyModel 类中？

@Szabolcs 唯一的值是 MyModel 类。

【参考方案1】：

我正在尝试回答您的一些问题，但是如果没有看到整个代码，这有点困难：

我认为它是一个组件，因为据我所知自定义标签与组件相关联，是吗？

正确 - 它是一个组件

我认为我没有这个组件的代码，而是我用 npm 下载的东西，应该放在我项目的 node_modules 目录中，是吗？

正确 - 你可能做过类似的事情

npm install primeng --save

这会将整个primeng ui-suite 下载到您的node_modules 文件夹中。在 Angular 中，应用程序的多个部分被捆绑到一个模块中。在您的 app.module.ts 中，您正在从 node_modules 文件夹中导入primeng CalendarModule。该模块还包含您之前提到的组件（与选择器<p-calendar> 相关的日历组件）

那么在我看来，这条线到底是什么意思？

<p-calendar [(ngModel)]="value"></p-calendar>

它会在您的 html 的这一部分创建 p-calender 组件。 [(ngModel)] 将组件中的 value 属性绑定到 p-calendar 组件。 value 属性必须存在于您的 html 所属的组件中。您在这里使用双向绑定。这意味着，当您的值发生变化时，将通知 p-calendar。当 p-calender 更改值时，组件内部的值也会更改。

双向绑定使用banana-in-a-box语法 --> [(ngModel)]=... 一种方式绑定只使用括号 --> [ngModel]=...

另一个疑问是，[...] 我可以这样做吗？

是的。您应该阅读更多关于 Angular 的教程或视频并阅读官方文档。在这里很难解释。

【讨论】：

好的，也就是说 p-calendar 组件包含一个名为 value 的变量？

是的。这是使用该组件的接口。

@AndreaNobili p-calendar 可能包含一个名为 value 的变量，但是当您执行 [(ngModel)]="value" 时，您正在对父组件的 value 属性进行双向绑定，在本例中为 @987654333 @。否则您无法在模板中访问 value 。

奇怪的是我的 AppComponent 中没有 value 属性

看起来[(ngModel)] 在您的组件中找不到您分配给它的变量时动态地在您的模板中创建它。