@2ng/dynamic-component 中文文档教程

发布于 4年前 浏览 30 更新于 3年前

@2ng/dynamic-component

Usage

import { DynamicComponentModule } from '@2ng/dynamic-component';
<ng-container
  [dynamicComponent]="component"
  [inputs]="inputs"
  [outputs]="outputs"
></ng-container>

API

component: Type<C>

Компонент Angular

inputs: Partial<{ [input in keyof C]: C[input] }>;

Объект, ключи которого - это инпуты компонента, который будет отрисован динамически。 Значение соответствует типу этого инпута。

Типизацией не смог получить только инпуты компонента, поэтому вывожу все свойства и методы класса в типах Но внутри директивы присваиваю значение свойства только если задано значение свойству с именем инпута。

outputs: Partial<
  {
    [output in keyof C]: C[output] extends EventEmitter<infer K>
      ? (event: K) => void
      : never;
  }
>;;

Объект, ключи которого - это аутпуты компонента, который будет отрисован динамически。 Значение - функция, которая будет передана в метод 订阅, при подписке на аутпут компонента。

Аналогично в типах вывожу все свойства и методы,но будет ошибка,если это свойство не экземпляр EventEmitter。 Внутри директивы подписываюсь на аутпут только если свойству с именем аутпута присвоена функция。


Example

Component One

一个.component.ts

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

@Component({
  template: `
    <div>{{ name }}</div>
    <button (click)="showMore.emit()">Show more</div>
  `,
})
export class OneComponent {
  @Input() name: string;
  @Output() showMore = new EventEmitter<void>();
}

Component Two

two.component.html

<ng-container
  [dynamicComponent]="component"
  [inputs]="inputs"
  [outputs]="outputs"
></ng-container>

two.component.ts

import { Component } from '@angular/core';
import OneComponent from '/one.component';

@Component({...})
export class TwoComponent {
  component = OneComponent;
  inputs = {
    name: 'Andrey'
  }
  outputs = {
    showMore: () => this.onShowMore();
  }

  onShowMore() {
    console.log('show more');
  }
}

@2ng/dynamic-component

Usage

import { DynamicComponentModule } from '@2ng/dynamic-component';
<ng-container
  [dynamicComponent]="component"
  [inputs]="inputs"
  [outputs]="outputs"
></ng-container>

API

component: Type<C>

Компонент Angular

inputs: Partial<{ [input in keyof C]: C[input] }>;

Объект, ключи которого - это инпуты компонента, который будет отрисован динамически. Значение соответствует типу этого инпута.

Типизацией не смог получить только инпуты компонента, поэтому вывожу все свойства и методы класса в типах. Но внутри директивы присваиваю значение свойства только если задано значение свойству с именем инпута.

outputs: Partial<
  {
    [output in keyof C]: C[output] extends EventEmitter<infer K>
      ? (event: K) => void
      : never;
  }
>;;

Объект, ключи которого - это аутпуты компонента, который будет отрисован динамически. Значение - функция, которая будет передана в метод subscribe, при подписке на аутпут компонента.

Аналогично в типах вывожу все свойства и методы, но будет ошибка, если это свойство не экземпляр EventEmitter. Внутри директивы подписываюсь на аутпут только если свойству с именем аутпута присвоена функция .


Example

Component One

one.component.ts

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

@Component({
  template: `
    <div>{{ name }}</div>
    <button (click)="showMore.emit()">Show more</div>
  `,
})
export class OneComponent {
  @Input() name: string;
  @Output() showMore = new EventEmitter<void>();
}

Component Two

two.component.html

<ng-container
  [dynamicComponent]="component"
  [inputs]="inputs"
  [outputs]="outputs"
></ng-container>

two.component.ts

import { Component } from '@angular/core';
import OneComponent from '/one.component';

@Component({...})
export class TwoComponent {
  component = OneComponent;
  inputs = {
    name: 'Andrey'
  }
  outputs = {
    showMore: () => this.onShowMore();
  }

  onShowMore() {
    console.log('show more');
  }
}
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文