angular-安装primeng

Posted 2023-05-03

参考技术A 我们做开发时必然要安装组件库，angular的组件库十分丰富，primeng就是其中之一。
primeng这个库还是比较强大的，但缺点是版本兼容性不咋地，安装时由于版本不一致导致的各种报错，很容易让你怀疑人生。

我的angular版本是8，相应的primeng也只能装对应的版本。

大家对照这份清单安装，如果报错的话，就按报错信息安装对应的依赖库。

我在安装的时候遇到了这个问题：

大概是说core-js里面的reflect-metadata文件没找到，去node_module找了一下确实没找见这个文件，我的解决办法是卸载掉core-js重新安装最新版本，如果能找到报错的文件，那就ok了。
然后还遇到这个这个问题：

一看便知是@angular/cdk这个库出问题了，我当时是直接按照文档安装的：

但这么做会给你安装最新版的（11），容易造成跟现有angular版本（8）冲突，解决办法就是指定安装8这个版本。
cdk是与弹出层有关的模块，如select，dropdown，picker等，在弹出来的时候自动创建覆盖全局的cdk，挂载在body下面，需要点击cdk才能关闭已打开的下拉。
cdk虽然是angular自带的模块，但是脚手架默认却不会安装，因为它不是核心模块，手动安装就涉及到版本号问题，这个有点坑。。。

我们可以在angular的配置文件配置一下styles选项，注入primeng相关的样式。

primeng的每个功能不是组件而是模块，这里我引入了dropdown这个模块，需要在imports引入。不过这个模块还需要依赖其他模块，都需引入。

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

【中文标题】这个简单的 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)] 在您的组件中找不到您分配给它的变量时动态地在您的模板中创建它。