Angular6父子组件的传值问题总结

一.父组件向子组件传数据

<!-- 将userName的值通过[name]属性传给子组件 -->

<!-- 父组件html -->
<app-father [name]='userName'></app-father>

//父组件ts

//要传的数据userName
userName = 'user1';

//子组件ts
 import { Component,OnInit,Input, Output, EventEmitter} from '@angular/core';
 @Component({
  selector: 'app-child',
  templateUrl: './app-child.component.html'
})
export class AppChildComponent implements OnInit {
 @Input() name:string;
 
  ngOnInit() {
    console.log(this.name)   //'user1'
  }
}

二.子组件向父组件传数据

<!-- 子组件html -->
<!-- 子组件发送数据的触发方法 -->
<button (click)="emitNewName()">发送</button>

//子组件ts
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './app-child.component.html'
})
export class AppChildComponent implements OnInit {
  @Output() onNameChanged = new EventEmitter();
  newName = 'newName';
  ngOnInit() {
  }
  emitNewName() {
    this.onNameChanged.emit(this.newName);
  }
}

<!-- 父组件html -->
<app-father (onNameChanged)='nameChanged($event)'></app-father >

//父组件ts
nameChanged(newName){
   console.log(newName);   //'newName'
}

三.父组件获取子组件属性或方法

方法一 (子组件加上属性标记，只能在html中使用，ts中无效).

//子组件ts  定义子组件属性newName 和方法getName()
  newName = 'newName';
  getName(){
    console.log('get it',this.newName);
  }

<!-- 父组件html 访问子组件属性和方法 -->
<app-child #child></app-child>

{{child.newName}}   
<button (click)="child.getName()">点击</button>

方法二.（使用@ViewChild）

//父组件ts
import { Component, OnInit, ViewChild} from '@angular/core';
//引入子组件
import { AppChildComponent } from './components/app-child/app-child.component';  
 
export class AppFatherComponent implements OnInit {
  @ViewChild(AppChildComponent)
  child:AppChildComponent
  
  ngOnInit() {
    console.log(this.child.newName)
    
  }
}

方法三.

//父组件ts
//引入子组件
import { AppChildComponent } from './components/app-child/app-child.component';  
 
export class AppFatherComponent implements OnInit {
 constructor(private appChildComponent :AppChildComponent )
  ngOnInit() {
    console.log(this.appChildComponent.newName)
    
  }
}

//父组件app.father.module.ts  import子组件
@NgModule({
  declarations: [
    AppFatherComponent,
    AppChildComponent
  ],
  imports: [
    AppChildComponent     // ************需要导入
  ]
})

Angular6父子组件的传值问题总结

猜你喜欢