Angular中如何从一个组件修改另一个组件的属性值？

我在Angular项目中创建了两个组件，希望从AppComponent（父组件）修改Test123Component（子组件）中HTML按钮的属性值：

• Test123Component：仅包含一个HTML按钮元素
• AppComponent：作为父组件，需要修改子组件的按钮属性值，后续还要添加点击事件实现动态修改

现有代码 #

Test123Component.ts #

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

@Component({
  selector: 'app-test123',
  templateUrl: './test123.component.html',
  styleUrls: ['./test123.component.css']
})
export class Test123Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
  buttonValue='hello'
}

test123.component.html #

<button value="{{buttonValue}}"></button>

AppComponent.ts #

import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '12';
  changedText='yoyo';
 }

app.component.html #

<app-test123 [buttonValue]=changedText></app-test123>

编译错误信息 #

Error: src/app/app.component.html:2:14 - error NG8002: Can't bind to 'buttonValue' since it isn't a known property of 'app-test123'.
1. If 'app-test123' is an Angular component and it has 'buttonValue' input, then verify that it is part of this module.
2. If 'app-test123' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

2 <app-test123 [buttonValue]=changedText></app-test123>
               ~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: src/app/app.component.ts:18:25 - error TS2339: Property 'setValue' does not exist on type 'Test123Component'.

18     this.childComponent.setValue(this.changedText);
                           ~~~~~~~~



✖ Failed to compile.

解决方法 #

方法一：使用@Input()输入属性（推荐） #

Angular中父组件向子组件传递数据，必须将子组件的目标属性声明为输入属性，步骤如下：

1. 修改Test123Component.ts，引入Input并给buttonValue添加装饰器：

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

@Component({
  selector: 'app-test123',
  templateUrl: './test123.component.html',
  styleUrls: ['./test123.component.css']
})
export class Test123Component implements OnInit {
  @Input() buttonValue = 'hello';

  constructor() { }

  ngOnInit(): void {
  }
}

2. 此时父组件的模板绑定已生效，changedText的值会自动同步到子组件的buttonValue。若要实现动态修改，给AppComponent添加点击事件：

AppComponent.ts：

import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = '12';
  changedText='yoyo';

  updateButtonValue() {
    this.changedText = '新的按钮值';
  }
 }

AppComponent.html：

<app-test123 [buttonValue]="changedText"></app-test123>
<button (click)="updateButtonValue()">修改按钮值</button>

点击父组件按钮，子组件按钮的value会自动更新。

方法二：使用@ViewChild获取子组件实例 #

如果需要通过调用子组件方法修改属性，可按以下步骤操作：

1. 修改Test123Component.ts，添加setValue方法：

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

@Component({
  selector: 'app-test123',
  templateUrl: './test123.component.html',
  styleUrls: ['./test123.component.css']
})
export class Test123Component implements OnInit {
  buttonValue='hello';

  constructor() { }

  ngOnInit(): void {
  }

  setValue(newValue: string) {
    this.buttonValue = newValue;
  }
}

2. 修改AppComponent.ts，引入@ViewChild并获取子组件实例：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Test123Component } from './test123/test123.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
   title = '12';
  changedText='yoyo';

  @ViewChild(Test123Component) childComponent!: Test123Component;

  ngAfterViewInit(): void {
    this.childComponent.setValue(this.changedText);
  }

  updateButtonValue() {
    this.childComponent.setValue('动态修改的值');
  }
 }

3. AppComponent.html添加触发按钮：

<app-test123></app-test123>
<button (click)="updateButtonValue()">修改按钮值</button>

注意：确保子组件已在当前模块的declarations数组中声明，否则@ViewChild无法获取实例。

内容的提问来源于stack exchange，提问作者JPG