Question

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

我按照这个快速的“Hello World”视频教程（在我看来是一个官方教程）来创建我的第一个包含 PrimeNG 的示例到我的Angular 4 webapp：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 类的值字段中，但似乎我遗漏了一些内容而不是以这种方式工作。我错过了什么？

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

创建一个自定义组件，将其用作 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更改该值时，组件内的值也会发生变化。

双向绑定使用ban-in-a-box语法 - ＆gt; [(ngModel)]= ...
单向绑定仅使用括号 - ＆gt; [ngModel]= ...

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

是。您应该阅读更多有关角度的教程或视频，并阅读官方文档。这里很难解释这一点。

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

1 个答案: