《angular 高级编程》学习集锦


# 第 2 章 第一个 Angular 程序#

添加第三方库(全局范围)#

npm install bootstrap

在 angular.json 配置文件中,把关联的脚本文件添加到 "scripts" 数组中:

最后再运行或重启 ng serve,看看你的应用是否正在使用 Bootstrap 4。

参考:https://angular.cn/guide/using-libraries#

第 7 章 SportsStore: 一个真实的应用程序#

一个有用的npm包,json-server

下面是 angular 的结构

│ favicon.ico
│ index.html                       <app-root>
│ main.ts                            检查引导文件(项目更改,编译并重新加载浏览器)
│ styles.css

├─app
│ │ app.component.css
│ │ app.component.html
│ │ app.component.ts     根组件 AppComponent
│ │ app.module.ts            根模块 @NgModule
│ │
│ ├─admin                         管理功能
│ ├─model                         数据模型
│ │ model.module.ts            providers: [ProductRepository, StaticDataSource]
│ │ product.model.ts            类 Product
│ │ product.repository.ts     类 ProductRepository
│ │ static.model.ts                类 StaticDataSource
│ │
│ └─store                           购物功能
│ store.component.css
│ store.component.html
│ store.component.spec.ts
│ store.component.ts
│ store.module.ts

全局注入@Injectable#

看看ProductRepository的注入方式 @Injectable

@Injectable()
export class ProductRepository {...}

因为 StoreComponent 构造函数注入了 ProductRepository

export class StoreComponent implements OnInit {

  constructor(private repostory:ProductRepository) { }

这里报错了。

在应用程序根级别,允许将其注入应用程序中的其他类。这可以通过将 providedIn: 'root' 字段添加到 @Injectable 装饰器来实现

解决办法:

  • Make sure ProductRepository is exported so it can be injected elsewhere:
@Injectable({  providedIn: 'root'
})
export class ProductRepository {
  //...
}

作者:【唐】三三

出处:https://www.cnblogs.com/tangge/p/17629999.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   【唐】三三  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2018-08-14 Spring4.x 基础
2011-08-14 ASP.NET服务器控件查询
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示