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

我是非常新的Angular 2 \ 4（我来自Java），我对使用PrimeNG“组件”的Angular项目有以下怀疑。这个简单的PrimeNG Angular 2示例如何工作？

我跟着这个快速“Hello World”的视频教程（在我看来，一个官方教程）创建包括PrimeNG到我的角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文件：

export class MyModel value：Date; }

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

那么我认为这条线究竟是什么？

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

我认为应该把用户插入的值到以前为MyModel类的值领域，但目前看来，我失去了一些东西，并不会以这种方式工作。我错过了什么？

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

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

我可以这样做吗？

来源

2017-08-11 AndreaNobili

你有'AppComponent'中的'value'属性吗？或者你所拥有的唯一'value'属性是在MyModel类中？ – Szabolcs

@Szabolcs唯一的值是MyModel类。 – AndreaNobili

我试图回答一些您的问题，但它很难有点没有看到整个代码：

我认为这是一个组件，因为从我所知道的自定义标签关联到组件，是吗？

正确的 - 这是一个组件

我认为我没有这个组件的代码，不过这东西，我与故宫下载的，应该到我的项目的node_modules目录，是它？

正确 - 你可能已经做过类似

npm install primeng --save

此下载整个primeng UI套房到您的node_modules文件夹。在Angular中，应用程序的多个部分被捆绑到一个模块中。在您的app.module.ts中，您正在从node_modules文件夹导入primeng CalendarModule。该模块还包含您之前提到（这是关系到选择<p-calendar>压延组分）的成分

那么究竟是什么这条线，我认为？

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

它在你的HTML的这一部分创建对压延机组件。 [（ngModel）]将组件中的value属性绑定到p日历组件。 value属性必须存在于您的html所属的组件中。你在这里使用双向绑定。意思是，当你的价值改变时，p日历将被通知它。当p-calender更改该值时，组件内的值也会发生变化。

双向结合使用香蕉在一箱语法 - >[(ngModel)]= ...
一种方式绑定使用仅括号 - >[ngModel]= ...

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

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

来源

2017-08-11 12:48:59 Riscie

好的，这意味着p-calendar组件包含一个名为value的变量？ – AndreaNobili

是的。这是使用这个组件的界面。 – Riscie

@AndreaNobili'p-calendar'可能包含一个名为'value'的变量，但是当您执行'[（ngModel）] =“value”'时，您正在对父组件的'value'属性进行双向绑定， case'AppComponent'。否则，您无法访问模板中的“{{value}}”。 – Szabolcs

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

回答

相关问题