Question

我有一些自定义复选框的组件，我想在网站的不同位置使用（不重复样式，标记等。但问题是 - 我得到了这个组件的相同实例。所以我改变了＆＃34;检查＆＃34;当我点击第一个或第二个复选框时，第一个复选框组件的状态（不重要）。我需要这两个＆＃34;复选框＆＃34;组件将是两个不同的实例，并具有不同的属性。是否可以使用Angular2 +？

复选框组件：

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

@Component({
  selector: 'checkbox',
  template: `
    <label for="checkbox" [class.active]="isChecked">
      <input id="checkbox" type="checkbox" (change)="change(checkbox.checked)" #checkbox>
    </label>
  `,
  styles: [`
    label {
      display: block;
      width: 42px;
      height: 42px;
      background: #32353a no-repeat center;
      border: 1px solid #64676c;
      transition: background-color .5s;
    }
    label:hover {
      background-color: #45494e;
      cursor: pointer;
    }
    .active {
      background-image: url(../assets/img/checked.png);
    }
    input {display: none;}
  `]
})

export class CheckboxComponent implements OnInit {
  @Input() public isChecked: boolean;
  @Output() public onChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  public ngOnInit(): void {
    this.isChecked = !!this.isChecked;
  }

  public change(value: boolean): void {
    this.isChecked = !this.isChecked;
    this.onChange.emit(this.isChecked);
  }
}

我正在使用此CheckboxComponent的设置组件＆＃; html：

<checkbox [isChecked]="true" (onChange)="change('invert', $event)"></checkbox>
<checkbox [isChecked]="true" (onChange)="change('touchscreen', $event)"></checkbox>

就像我在评论中所说，我有导入和导出CheckboxComponent的SharedModule

SharedModule：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { CheckboxComponent } from './checkbox/checkbox.component';

@NgModule({
  declarations: [ CheckboxComponent ],
  imports: [
    RouterModule,
    CommonModule
  ],
  exports: [ CheckboxComponent ],
  providers: [ URLWatcherService ]
})

export class SharedModule {}

这是通过SettingsModule

导入的SettingsControlComponent

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

@Component({
  selector: 'settings-controls',
  templateUrl: './settings-controls.component.html',
  styleUrls: [ './settings-controls.component.css', '../settings-common/settings-common.css' ]
})

export class SettingsControlsComponent {
  @Output() public onChange: EventEmitter<any> = new EventEmitter<any>();

  public change(controlName: string, value: any): void {
    let newValue = {};
    newValue[controlName] = value;
    this.onChange.emit(newValue);
  }
}

Answer 1

是的，为了使组件成为可共享的＃34;，您需要在模块中声明它并将其导出：

@NgModule({
  imports: [/* required imports */],
  declarations: [CheckboxComponent],
  exports: [CheckboxComponent],
  providers: [/* your providers */]
})

现在，当您需要在另一个模块中使用组件时，您所要做的就是导入此模块并在HTML中使用组件选择器。

我所做的是，所有这些共享组件都在名为SharedModule的模块中声明，我在我的所有应用程序中使用。

在Angular中使用页面上的2个组件实例

1 个答案: