Angular组件之间的交互

<child [childData]="appData"></child><!--childData是子组件的接收参数，appData是父组件传递的数据，整个数据传递过程的重点，桥梁-->

import { Component } from ‘@angular/core‘;
import { ChildComponent } from ‘./child/child.component‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  title = ‘app‘;
  appData=[‘Apple‘,‘Banana‘,‘watermelon‘,‘pear‘];
}

import { Component,Input } from ‘@angular/core‘;//记得导入Input装饰器

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent {
  title = ‘child‘;
  @Input() childData:any;//接收数据的接口
}

<ul>
    <li *ngFor="let children of childData; let num1 = index">{{num1}}--{{children}}</li>
</ul>
<ul>
    <li *ngFor="let children of childData; index as num2">{{num2}}--{{children}}</li><!--index的第二种写法-->
</ul>

<child *ngFor="let app of appData" [child]="app"></child>

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

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  title = ‘app‘;
  appData=[‘Apple‘,‘Banana‘,‘ ‘,‘pear‘]; //父组件数据
}

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

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent {
  title = ‘child‘;
  private _name = ‘‘; //定义一个私有向量，来暂时储存父组件传递过来的数据
  @Input() set child(name: string) { //child是我们用来接收父组件传递过来的数据的一个变量，我们用setter来截取到这个变量，然后做一些修改，child这个变量名
                                       //它是取决于父组件app.component.html里面的[child]="app"，不能随便改动，child的形参名字可以随便修改
    this._name = name.trim() || ‘Oranges‘; //会trim掉名字里的空格，并把空值替换成Oranges。
  }
 
  get child(): string{ //用get重新获取重置过后的child变量，这个过程中_name这个是有变量就用到了
      return this._name;
  }
}

<p>{{child}}</p>

<p>{{title}}</p><!--调用父组件自己的变量-->
<p>{{data.title}}</p><!--调用子组件的变量-->
<child #data></child><!--在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法-->
<button (click)="data.click()">点击</button><!--调用子组件的方法-->

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

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
    title="app";//父组件的变量
}

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

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent{
  title = ‘child‘;//子组件的变量
  click(){//子组件的方法
      this.title="changeChild";
  }
}

<p>{{title}}</p>
<p>{{data.title}}</p>
<child #data></child>
<button (click)="onclick()">点击</button><!--注意这里，跟第五个方法有些区别-->

import { Component } from ‘@angular/core‘;
import { ViewChild } from ‘@angular/core‘;
import { ChildComponent } from ‘./child/child.component‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
    title="app";
    @ViewChild(ChildComponent)//通过@ViewChild属性装饰器，将子组件CountdownTimerComponent注入到私有属性timerComponent里面，此处不能加分号。
    private child: ChildComponent;
    onclick(){
        this.child.click();
    }
}

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

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent{
  title = ‘child‘;
  click(){
      this.title="changeChild";
  }
}

<p>{{title}}</p>
<button (click)="onclick()">点击</button>
<child></child>

import { Component } from ‘@angular/core‘;
import { ChildComponent } from ‘./child/child.component‘;
import { Service } from ‘./Service‘;//导入服务

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
    title=‘app‘;
    constructor(public pService: Service) { //原来的写法是这样的pService = new Service();
     }
    onclick(){
        this.title = this.pService.getData();
        console.log(this.title);
    }
}

import { Component } from ‘@angular/core‘;
import { Service } from ‘../Service‘;

@Component({
  selector: ‘child‘,
  templateUrl: ‘./child.component.html‘,
  styleUrls: [‘./child.component.css‘]
})
export class ChildComponent{
  title = ‘child‘;
  constructor(public pService: Service) {
    }
  onclick(){
    this.title = this.pService.getData();
  }
}

<p>{{title}}</p>
<button (click)="onclick()">点击</button>

import {Injectable} from "@angular/core"

@Injectable()
export class Service {
  title=‘service‘;//公共变量
  getData() {//公共方法
    return this.title;
  }
}

import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;

import { AppComponent } from ‘./app.component‘;
import { ChildComponent } from ‘./child/child.component‘;
import { Service } from ‘./Service‘;//导入服务

@NgModule({
  declarations: [
    AppComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Service],//注册服务
  bootstrap: [AppComponent]
})
export class AppModule { }