六、angular6-父子页面传值

1.父页面向子页面传值

app.component.html页面添加

<app-my-first-componnet [num]="100" [pHeros]="heros"></app-my-first-componnet>

num表示传单个值的方式，pHeros表示传递对象方式， num和pHeros表示子页面接收的属性名

页面完整代码

<!-- Toolbar -->
<div class="card-container" role="banner">
  <app-my-first-componnet [num]="100" [pHeros]="heros"></app-my-first-componnet>
</div>

子页面

子页面以@Input接收

// 声明对外暴露的接口, 用于接受父组件的数据源输入, 必须是Number类型,获取父组件的值
@Input() num: Number;
@Input() pHeros;

2.父页面获取子页面的值

1.app.component.ts引入子组件

//引入子组件
import { MyFirstComponnetComponent } from './my-first-componnet/my-first-componnet.component';

2. 定义子属性

 @ViewChild(MyFirstComponnetComponent)
  child:MyFirstComponnetComponent

父子页面完整代码

 app.component.html

<!-- Toolbar -->
<div class="card-container" role="banner">
  <app-my-first-componnet [num]="100" [pHeros]="heros"></app-my-first-componnet>
  <button (click)="getChildHeros()"  class="btn btn-primary">获取子组件的数据</button>
</div>

app.component.ts

import {Component, ViewChild} from '@angular/core';
import { MyFirstServiceService } from './my-first-service.service';
//引入子组件
import { MyFirstComponnetComponent } from './my-first-componnet/my-first-componnet.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular6-fundamentals';
  message = null;
  heros : Array<{name: string, strength: number, agile:number, intelligence: number, color: string}> = [
    {name:'神灵武士', strength : 120, agile : 66, intelligence: 55, color: '#2cff54'},
    {name:'恐怖利刃', strength : 60, agile : 58, intelligence : 130, color: '#659bff'},
    {name:'末日使者', strength : 65, agile : 135, intelligence : 75, color: '#ff4722'}
  ]
  @ViewChild(MyFirstComponnetComponent)
  child:MyFirstComponnetComponent
  getChildHeros = function () {
    console.log(this.child.heros);
  }
  constructor(private myFirstServiceService: MyFirstServiceService) {
    this.message = myFirstServiceService.message;
  }
}

my-first-componnet.component.ts

 

import {Component, ViewChild} from '@angular/core';
import { MyFirstServiceService } from './my-first-service.service';
//引入子组件
import { MyFirstComponnetComponent } from './my-first-componnet/my-first-componnet.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular6-fundamentals';
  message = null;
  heros : Array<{name: string, strength: number, agile:number, intelligence: number, color: string}> = [
    {name:'神灵武士', strength : 120, agile : 66, intelligence: 55, color: '#2cff54'},
    {name:'恐怖利刃', strength : 60, agile : 58, intelligence : 130, color: '#659bff'},
    {name:'末日使者', strength : 65, agile : 135, intelligence : 75, color: '#ff4722'}
  ]
  @ViewChild(MyFirstComponnetComponent)
  child:MyFirstComponnetComponent
  getChildHeros = function () {
    console.log(this.child.heros);
  }
  constructor(private myFirstServiceService: MyFirstServiceService) {
    this.message = myFirstServiceService.message;
  }
}

 my-first-componnet.component.html

<!--
  index 索引  first是否第一个 last是否最后一个 odd是否奇数 even是否偶数 循环时可以去掉，用到的话就加上
-->
<div class="container" style="margin-top: 10px;">
  <div class="row" *ngFor="let hero of heros;index as index; first as first; last as last; odd as odd; even as even;">
    <span class="my-label">英雄：</span><span>{{hero.name}}</span>
    <span class="my-label">力量：</span><span>{{hero.strength}}</span>
    <span class="my-label">敏捷：</span><span>{{hero.agile}}</span>
    <span class="my-label">智力：</span><span>{{hero.intelligence}}</span>
    <div class="input-group mb-3">
      <input  type="text" [(ngModel)]="hero.speed">
      <div class="input-group-append">
        <button class="btn btn-primary" type="button" (click)="elementFn(hero.color)">英雄主题色</button>
      </div>
    </div>
    <div>
      <span>输入的移动速度是：{{hero.speed}}</span>
    </div>
  </div>
  <div *ngIf="showGameName">{{gameName}}</div>
  <!-- 获取dom元素-->
  <div class="row" #msgBox>英雄主题色</div>
  <!-- 子组件获取父组件的值开始-->
    <div class="row">
      <h4>子组件获取父组件的传值：</h4>
      <h4>{{num}}</h4>
    </div>
    <div class="row">
      <h4>子组件获取父组件的对象：</h4>
      <ul *ngFor="let pHero of pHeros">
        <li>{{pHero.name}}</li>
      </ul>
    </div>
  <! -- 子组件获取父组件的值结束-->
</div>