小编zag*_*ggi的帖子

我已经使用 Angular 工作了一段时间，但找不到关于以下方面的明确建议：

内联初始化成员变量 vs 在构造函数中

我有几次检查我的代码以在构造函数中移动简单类型（布尔值、数字等）的初始化，但仍然想知道这是更好的做法还是品味问题？对我来说，内联初始化会产生更本地化和简洁的代码，这就是我喜欢它的原因，但我对还是不对？

例子：

@Component({
  selector: 'app-elem',
  templateUrl: './app-elem.component.html',
  styleUrls: ['./app-elem.component.scss'],
})
export class AppElemComponent {

  public isHidden = true;    // <-- initialization inline
  public isVisible: boolean;

  constructor() {
    this.isVisible = true;  // <-- vs initialization in the constructor
  }
}

哪些代码更改可以纠正下面描述的错误？

用例

下拉输入 UI 受到保护，不会通过模式意外选择值更改。但是，连接到下拉列表的事件（单击、焦点或其他）会导致在开发模式下的 Chrome 控制台中观察到的 ExpressionChangedAfterItHasBeenCheckedError。

观察结果

单击下拉菜单时，会引发ExpressionChangedAfterItHasBeenCheckedError （请参阅控制台）

预期结果

单击下拉菜单时，将打开一个模态框，不会出现错误

演示

stackblitz中演示的链接

笔记

• 如“您需要了解的有关 ExpressionChangedAfterItHasBeenCheckedError 的所有信息”中所述，我尝试触发更改检测（请参阅 app.component.ts:48-49 内的注释，标记为 STEP-1 和 STEP-2），但未成功（可能触发）没在正确的地方？）
• 演示中的模式未完全实现 [确定] 和 [取消]，因为它不会影响错误
• 该代码是较大应用程序的简化版本

VSCode：如何在 TypeScript 和 Javascript 中滚动 IntelliSense 重载签名？

有时，当您编写“someObj.someMethod(”并显示一个（第一个）重载时，IntelliSense 会在工具提示中提示例如（+1 重载），但如何查看其他重载？

以下是Angular 指南关于样式范围和继承的说法:

@Component元数据中指定的样式仅适用于该组件的模板.嵌套在模板中的任何组件或投影到组件中的任何内容都不会继承它们

如果需要在嵌套树下传播样式,建议用户明确

使用/ deep/shadow-penetcing descendant组合器将样式向下强制通过子组件树到所有子组件视图中.

// For example, this should make all h3 elements down the nesting-tree italic: 

    :host /deep/ h3 {
      font-style: italic;
    }

我们来看看这个示例设置:

app.component.ts

@Component({
    selector: 'app-root',
    template: `
        <div class="my-container">
            <app-hello></app-hello>                // <-- a nested component
            This is local txt in app component
        </div>
    `,
    styles: ['.my-container { color: red; }']
})
export class AppComponent {}

hello.component.ts

@Component({
  selector: 'app-hello',
  template: `<h1>Hello Component!</h1>`
})
export class HelloComponent {}

预期: …