提供者，ChangeDetection，Encapsulations，Angular组件定义中的主机

Question

我看到一些包，它们提供者，封装，changeDetections，host作为下面的代码。它们的含义是什么？它在组件类中的行为与下面的代码有关。

@Component({
    selector: 'ng-select',
    templateUrl: './ng-select.component.html',
    styleUrls: ['./ng-select.component.scss'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => NgSelectComponent),
        multi: true
    }],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        'role': 'listbox',
        'class': 'ng-select',
        '[class.ng-select-single]': '!multiple',
    }
})

Answer 1

它意味着以下事情

• 封装，如果你使用ViewEncapsulation.None，这意味着你要写样式属性或styleUrl :( css文件）的样式将是全局范围，所以如果你有 .danger {color：red}你也可以在组件之外使用那种风格
• host意味着您要在host元素本身上添加属性，例如在这种情况下，它将添加下一个属性 ng-select role class =“ng-select”\
• 提供者意味着您在那里注入的服务将仅在组件级别可用，如果您有两个不同的ng-select，它们将具有此类的不同实例
• 更改检测您可以配置更改检测在此组件上的工作方式，默认情况下，它将运行此组件的每个更改检测周期，OnPush策略意味着只有在任何输入属性引用已更改时，它才会对此组件运行更改检测