时间戳

首页 > 解决方案 > Angular 自定义组件属性设置

angular - Angular 自定义组件属性设置

问题描述

（欢迎任何人改写我的问题，我不知道如何措辞）

假设我创建了一个 Angular 组件，如下所示：

<app-my-test></app-my-test>

如何允许用户通过在组件中键入选项来打开和关闭选项，如下所示：

<app-my-test booleanCheck></app-my-test>

然后在我的 .ts 文件中，如果他们添加了它，我想booleanCheck是真的，如果他们没有添加它，我想是假的。下面是一个闪电战。目标是console.log记录true是否booleanCheck已添加和false未添加。

https://stackblitz.com/edit/angular-xr3p84?file=src%2Fapp%2Fapp.module.ts

我不希望这是一个答案：

<app-my-test booleanCheck="true"></app-my-test>
<app-my-test [booleanCheck]="true"></app-my-test>

标签： angular

解决方案

leverage如果可用，您可以调用其中setter的。@Inputinput

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

@Component({
  selector: 'my-test',
  templateUrl: './app.test.html',
  styleUrls: ['./app.test.css']
})
export class TestComponent implements OnInit {
  private _booleanCheck = false;

  @Input()
  set booleanCheck(param) {   // this is setter for booleanCheck input.
    this._booleanCheck = true;
  }

  ngOnInit() {
    console.log('ngOnInit');
    console.log(this._booleanCheck);
  }
}

工作副本在这里 - https://stackblitz.com/edit/angular-9ubmg7

推荐阅读