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

Question

我是Angular2的新人（我是Java过来的），对一个Angular 使用 PrimeNG 的项目 "components".

我按照这个快速 "Hello World" 视频教程（在我看来是官方教程）创建了我的第一个示例，其中包括 PrimeNG 到我的 Angular 4 网络应用程序：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;
}

我的疑惑主要与这个 class 声明到这个 app.module.ts 文件有关：

导出class我的模型{ 值：日期； }

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

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

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

我觉得应该把用户插入的值放到前面MyModelclass的value字段中，但似乎我遗漏了一些东西并且无法以这种方式工作。我错过了什么？

还有一个疑惑，我能不能这样：

创建一个自定义组件，将用作我的 app.component.html 视图中的自定义标签，例如 MyCustomCalendar 关联到标签。
此组件视图应包含
它的控制器应该包含一个将使用所选日期初始化的变量。

我可以做这样的事情吗？

Answer 1

我正在尝试回答您的一些问题，但是如果不看完整代码就有点困难：

I think that it is a component, because from what I know the custom tag are associated to component, is it?

正确 - 它是一个组件

I think that I have not the code of this component but is something that I have downloaded with npm and should be into the node_modules directory of my project, is it?

正确 - 您可能做过类似

的事情

npm install primeng --save

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

So what exactly does this line in my view?

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

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

双向绑定使用盒子里的香蕉语法 --> [(ngModel)]=...
一种绑定方式仅使用括号 --> [ngModel]=...

Another doubt is, [...] Can I do something like this?

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

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

How exactly works this simple PrimeNG Angular 2 example?

angular

typescript

primeng

javascript-framework