angular父组件传值给子组件

angular父组件传值给子组件

ts跟java不一样 不要再构造方法里写一些奇奇怪怪的东西 应该另外写在方法里面

step1: 生成子组件

 ng generate component child

step2: Parent 传递json数据

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  parentMessage = JSON.stringify({name: 'tom', address: 'beijing',age:17});

  constructor() {
  }

  ngOnInit(): void {
  }

}

step3: Child 解析json

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    {{getUserName()}}
    {{getUserAddress()}}
    {{getUserAge()}}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() {
  }

  getUserName(): string {
    return JSON.parse(this.childMessage).name
  }

  getUserAddress(): string {
    return JSON.parse(this.childMessage).address;
  }

  getUserAge(): number {
    return JSON.parse(this.childMessage).age
  }

  ngOnInit(): void {
  }

}

run ，success ！！！

end