Angular组件传值

整一段代码到 twoer.component.html

<div class="modal fade show d-block" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

父子传参

父组件直接访问子组件的 public 属性和方法

父组件可以直接调用子组件的public型属性和方法

• 父组件的视图中调用子组件的方法需要利用模板变量

• 父组件的类中调用子组件的方法需利用@ViewChild装饰器

缺点：如果父组件直接访问子组件，那么两个组件之间的关系就被固定死了。父子两个组件紧密依赖，谁也离不开谁，也就都不能单独使用了。所以，除非你知道自己在做什么，最好不要直接在父组件里面直接访问子组件上的属性和方法，以免未来一改一大片。

通过ViewChild获取子组件的数据和事件

1. 父组件里面给子组件标签取个名字

<app-child #child></app-child>

2. 然后在ts文件里引入ViewChild

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

3. 接下来我们就可以肆意妄为的使用子组件中的数据和方法了

export class HeadersComponent implements OnInit {
  constructor() { }
  @ViewChild('child') child; //通过ViewChild来绑定我们的子组件
  ngOnInit() {
    this.child.childVal //直接调用子组件中的数据
  }
}

借助于 @Input 和 @Output 进行传值

• 就是利用输入属性和输出属性来实现
• 输入属性和输出属性需要用到属性绑定和事件绑定相关的知识

父传子

@input（）

一个将类字段标记为输入属性的装饰器。该属性绑定到DOM模版，当变更检测时，Angular 会自动使用这个 DOM 属性的值来更新此数据属性。（通常用作父组件向子组件传值）

创建属性：

// twoer.component.ts

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

@Component({
  selector: 'app-twoer',
  templateUrl: './twoer.component.html',
  styleUrls: ['./twoer.component.css']
})
export class TwoerComponent implements OnInit {
  // 定义所需要的变量，并初始化默认值
  //通过控制d-block来控制模态框显示与隐藏 
  @Input() show = true;
  @Input() title = '标题...';
  @Input() confirmtext = '确定';
  @Input() cancelText = '取消';
}

组件绑定属性

<div class="modal fade show d-block" id="exampleModal" itlass.d-block="show" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{confirmtext}}</button>
                <button type="button" class="btn btn-primary">{{confirmtext}}</button>
            </div>
        </div>
    </div>
</div>

父组件传入属性

// app.component.ts

export class AppComponent {
  dialogTile = "这是AppComponent传入的title";
  dialogShow = false;
}

// app.component.html

<app-dialog [title]="dialogTile" [show]="dialogShow" confirmText="OK" ></app-dialog>

页面也随之发生了改变

子传父

@Output()

一个将类字段标记为输出属性的装饰器。凡是绑定到输出属性上的 DOM 属性，Angular 在变更检测期间都会自动进行更新。（通常用作子组件向父组件传值）

子组件模板

<input #newItem></input>
<button (click)='addNewItem(newItem.value)'>添加</button>

子组件实例

export class ChildItemComponent {
  @Output() newItemEvent = new EventEmitter<string>();
  addNewItem(value: string){
      this.newItemEvent.emit(value)
  }
}

父组件模板

<child-item (newItemEvent)="addItem($event)"></child-item>

父组件实例

export class AppComponent {
  list=['item1','item2','item3'] 
  addItem(evt:string){
      this.list.push(evt)
  }
}

兄弟传参

• 利用他们共同的父组件进行通信
• 此时他们的父组件相当于一个中间人

没有直接关系传参

适用于任何关系的方法

• 借助于service单例进行通讯
• 利用cookie或者localstorage进行通讯
• 利用session进行通讯

总结：

1. 生成组件命令ng generate component [options]

2. 父组件向子组件传值：

   子组件：@Input()变量名 = 默认值
   父组件：<app-child [变量名]=“父组件里的变量”>

3. 子组件向父组件传值：

   子组件：@Output() 自定义事件名 = new EventEmitter();
   父组件：<app-child (自定义事件名)=“父组件里的方法”>