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

Question

我是 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 标签。

• 此组件视图应包含

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

我可以这样做吗？

Answer 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 的教程或视频并阅读官方文档。在这里很难解释。