Get best of the week

将数据传递到Angular组件的不同方法

哈Ha！我向您介绍Netanel Basal 撰写的文章“将输入传递到Angular中的组件的不同方法”的翻译。

图片

在本文中，我们将分析将数据传输到组件的三种不同方式。在下面的示例中，我们将使用select作为主要组件，但是其中使用的方法与其他组件相关。

创建一个选择组件，以接收以下输入大小和位置。

使用输入


我们都熟悉的第一种方法是使用Input装饰器。

@Component({
  selector: 'app-select',
  template: `
    <p><b>Size</b> {{ size }}</p>
    <p><b>Placement:</b> {{ placement }}</p>    
    `
})
export class SelectComponent {
  @Input() size: 'sm' | 'md' | 'lg' = 'md';
  @Input() placement: 'top' | 'bottom' | 'right' | 'left'  = 'bottom'
}

除了不太灵活之外，此代码非常有用。例如，我们需要将应用程序中的所有选择的大小变量设置为大。因此，我们必须允许客户端全局重写所有输入。

使用注入依赖


为此，我们可以使用Angular依赖注入函数。

import { InjectionToken, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SelectConfig {
  size: 'sm' | 'md' | 'lg' = 'md'
  placement: 'top' | 'bottom' | 'right' | 'left' = 'bottom';
}

export function setSelectConfig(config: Partial<SelectConfig>) {
  return {
    ...new SelectConfig(),
    ...config
  }
}

首先，我们需要创建一个提供程序配置。该提供程序可用作令牌，类型，还可以为每个输入设置默认值。我们在选择组件中使用它：

@Component({
  selector: 'app-select',
  template: `
    <p><b>Size</b> {{ size }}</p>
    <p><b>Placement:</b> {{ placement }}</p>    
    `
})
export class SelectComponent {
  @Input() size: SelectConfig['size'];
  @Input() placement: SelectConfig['placement'];

  constructor(private config: SelectConfig) {
    this.size = config.size;
    this.placement = config.placement;
  }
}

现在，我们可以在应用程序级别重写所选的输入：

@NgModule({
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'lg'
      })
    }
  ]
  bootstrap: [AppComponent]
})
export class AppModule { }

但这还不是全部。我们还可以使用它在组件级别传递各种输入。例如，我们有一个在应用程序中多次使用过的组件。在每种情况下，我们都需要使用较小的值：

@Component({
  selector: 'app-todos-page',
  template: `<app-select></app-select>`,
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'sm'
      })
    }
  ]
})
export class TodosPageComponent {}

我们可以将其添加到provider组件，并且该值将用于模板中所有声明的组件和child组件。但是我们仍然可以直接重写此变量，如下所示：

@Component({
  selector: 'app-todos-page',
  template: `
   <app-select></app-select>
   <app-select size="lg"></app-select>
`,
  providers: [
    {
      provide: SelectConfig,
      useValue: setSelectConfig({
        size: 'sm'
      })
    }
  ]
})
export class TodosPageComponent {}

惰性模块 使用相同的策略，因为它会创建新的注入。

使用指令


假设我们有很多投入的组件。我们为其中大多数设置了相同的值。在示例中，它将如下所示：

<!-- It can be in the same template or in different places in the app -->
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right  inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>
<app-select size="lg" position="right" inputThree="someValue"></app-select>

我们可以重复这些值，但是我们可以创建一条指令，该指令将传递所有变量的必要值：

@Directive({
  selector: '[selectConfigOne]',
  providers: [{
    provide: SelectConfig,
    useValue: setSelectConfig({
      size: 'lg',
      placement: 'right',
      inputThree: 'someValue'
    })
  }]
})
export class SelectConfigOneDirective {}

我们可以在需要的地方使用此指令：

<h1>Using Inputs</h1>
<app-select size="lg"></app-select>
<app-select placement="top"></app-select>

<h1>Using a Directive</h1>
<app-select selectConfigOne></app-select>

<app-todos-page></app-todos-page>

More articles:


All Articles