这次学习的是 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笔记：依赖注入