Angular基础学习二(包含了组件，服务，模块，组件通信)

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/Kineone/article/details/99285876

目录结构

components下是基本组件。

modules下是基本模块demo。

valueof是子模块，主要是父子组件间传值，利用服务传值。

app-routing.module.ts中在routes中设置路由，component设置挂载组件，loadChildren为加载子模块

子模块

school模块，下面创建了三个组件，把lesson组件配置成了teacher组件的子组件，student组件配置成可以传值的组件，写法是在路由后加上/:key，module.ts中要添加上相应的组件信息。

student组件ts文件

通过this.route.params.subscribe(data => this.name = data.name)接收传来的参数，并将参数赋值给name

记得在constructor中声明route

student组件html文件

根html

父子组件

三个组件，father父组件，两个子组件。

子组件获取父组件的数据

子组件上加[name1]="name2"，将父组件中国呢的name2传给子组件，子组件name1接收。写上this，将父组件实例给子组件，子组件可以获取父组件中的数据和方法。

子组件通过@Input() name1;接收父组件传过来的数据

父组件获取子组件的数据

son2是父组件获取子组件的数据demo，在子组件上加上#name

父组件中定义@ViewChild('name',{static:false}) name;通过name就可以用到子组件的数据和方法。

服务传值

在上面sontwo和father组件之间用到了服务，sontwo中给服务设置值，father查看服务的值。

1.引入服务；2.constructor中声明；3.正常使用

在服务中定义了一个字符串。

[code]export class FirstServiceService {
public firserstring:string;
constructor() { }
}

因为为是在子模块中使用的服务，所以为是在这个模块下注册的服务。