目录结构
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.正常使用
在服务中定义了一个字符串。
export class FirstServiceService {
public firserstring:string;
constructor() { }
}
因为为是在子模块中使用的服务,所以为是在这个模块下注册的服务。