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

目录结构

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() { }
}

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值