如何给Stackblitz默认独立Angular组件添加@Input属性？

问题根源 #

Angular引导根组件（如<my-app>）时，不会解析index.html中根元素的属性作为@Input。这是因为根组件的初始化流程跳过了常规组件的属性绑定解析环节，直接将index.html里的标签作为宿主元素使用，所以你写的matTypography属性不会触发组件内的@Input setter。

两种可行解决方案 #

方案1：直接读取宿主元素属性 #

在根组件的初始化钩子中手动读取宿主元素的属性，触发你的逻辑：

import { Component, HostBinding, HostElement, OnInit } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  @HostBinding('class.mat-typography') hasMatTypography = false;

  constructor(@HostElement() private hostElement: HTMLElement) {}

  ngOnInit() {
    const attrValue = this.hostElement.getAttribute('matTypography');
    this.hasMatTypography = coerceBooleanProperty(attrValue);
  }
}

方案2：给根组件套一层父组件 #

通过新增父组件来实现标准的属性绑定，让根组件的@Input正常工作：

1. 创建root-wrapper.component.ts：

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

@Component({
  selector: 'app-root-wrapper',
  template: `<my-app [matTypography]="true"></my-app>`,
})
export class RootWrapperComponent {}

2. 修改main.ts，引导父组件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { RootWrapperComponent } from './app/root-wrapper.component';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    document.body.innerHTML = '<app-root-wrapper></app-root-wrapper>';
  })
  .catch(err => console.error(err));

3. 根组件的@Input setter即可正常触发：

import { Component, HostBinding, Input } from '@angular/core';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @HostBinding('class.mat-typography') private _hasMatTypography = false;

  @Input() set matTypography(value: boolean | string) {
    this._hasMatTypography = coerceBooleanProperty(value);
    console.log('setter触发');
  }
}

选型建议 #

• 若仅需一次性读取根元素属性，方案1更轻量高效；
• 若需要后续动态修改属性值，方案2更贴合Angular的组件绑定机制。

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