这次学习的是 Angular 的依赖注入,一开始练习时就遇到了 Angular 中的一个坑,这个坑是什么?请往下看。
在这次练习中首先中首先创建一个空的 Angular 项目,然后再在项目中建立一个名为“user”的组件,然后再使用“ng g service”命令来创建一个服务组件。就在这一步遇到问题。
使用命令:
ng g service share/user
在执行完后出现了“Error: ELOOP: too many symbolic links encountered”错误,这个错误折磨了我大半天,终于 google 到的解决方法是将将项目中的node_modules 文件删除,使用 npm install命令重新生成该文件,不要使用cnpm install命令!
所说在 Angular Cli 使用ng g 命令创建新的 module 时,也会出现相同的问题(虽然我还没用过这个),解决的方法同上。
接下来就用一些实例来描述。
一、简单的依赖注入与调取
1.1、创建一个用户服务组件
上面有创建服务组件的命令,这里就不多写了。然后再在这个服务的 TS 文件里面输入以下的代码:
import {Injectable} from '@angular/core'; @Injectable() export class UserService { constructor() { } getUser(): User { return new User(1, 'IBM'); } } export class User { constructor(public id: number, public name: string) { } }
1.2、在 USER 组件的修改
控制器中输入以下调取的代码:
import {Component, OnInit} from '@angular/core'; import {User, UserService} from "../share/user.service"; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit { private user:User; constructor(public userService: UserService) { } ngOnInit() { this.user = this.userService.getUser(); } }
在 USER 组件的模板中输入以下呈现的代码:
<p> user works! </p> <p> 依赖注入 Demo </p> <h1>用户信息</h1> <p> 用户ID:{{user.id}}<br> 用户名:{{user.name}} </p>
1.3、项目的应用(app.component)的模板中输入显示用户组件的代码:
<app-user></app-user>
1.4、在 AppModule 中引入用户服务组件:
…… import { AppComponent } from './app.component'; import { UserComponent } from './user/user.component'; import {UserService} from "./share/user.service"; @NgModule({ declarations: [ AppComponent, UserComponent ], imports: [ BrowserModule ], providers: [UserService], bootstrap: [AppComponent] }) ……
下图为执行后的效果
转载请注明:隨習筆記 » Angular笔记:依赖注入