Question

因此，我正在尝试在ts / angular2中实现此切换按钮。编译不会产生错误，但是控制台会：

ERROR Error: The selector "app-punch" did not match any elements
    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.selectRootElement (platform-browser.js:1079)

html

<toggle-button [config]="config" (onStateChange)="onStateChanged($event)">
</toggle-button>

{{value | json}}

简单，但由于先前的错误而无法呈现。

组件ts

import { Component } from '@angular/core';
import { ToggleButtonConfig } from './toggle-button.component';

@Component({
  selector: 'app-punch',
  templateUrl: './punch.component.html',
  styleUrls: [ './punch.component.scss' ]
})
export class PunchComponent  {
  value: boolean;
  config: ToggleButtonConfig;

  constructor() {
    let self = this;

    this.config = {
      state: false,
      onText: 'true',
      offText: 'false',
      onColor: 'btn btn-primary',
      offColor: 'btn btn-danger'
    };
  }

  public onStateChanged(value: boolean) {
    this.value = value;
  }
}

编译时不呈现任何错误

模块ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { PunchComponent } from './punch.component';
import { ToggleButtonComponent } from './toggle-button.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ PunchComponent, ToggleButtonComponent ],
  bootstrap:    [ PunchComponent ]
})
export class PunchModule { }

编译时不呈现任何错误

toggle-button.component.ts

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

@Component({
    selector: 'toggle-button',
    template: `<button [ngClass]="state ? onColor : offColor" (click)="onClick()">
      {{ state ? onText : offText }}
    </button>`
})
export class ToggleButtonComponent {
    @Input() state: boolean;
    @Input() onColor: string;
    @Input() onText: string;
    @Input() offColor: string;
    @Input() offText: string;
    @Input() config: ToggleButtonConfig; 
    @Output() onStateChange: EventEmitter<boolean> = new EventEmitter<boolean>();

    public ngOnInit(): void {
      if (this.config !== null) {
        this.state = this.config.state;
        this.onColor = this.config.onColor;
        this.offColor = this.config.offColor;
        this.onText = this.config.onText;
        this.offText = this.config.offText;
      }
      if (typeof(this.state) !== 'boolean')
        this.state = false;
      if (!this.onText || this.onText === '') 
        this.onText = "Button";
      if (!this.offText || this.offText === '')
        this.offText = this.onText;
      if (!this.offColor || this.offColor === '')
        this.offColor = this.onColor;
    }

    public onClick(): void {
        this.state = !this.state;
        this.onStateChange.emit(this.state);
    }
}

export interface ToggleButtonConfig {
  state?: boolean;
  onColor: string;
  onText: string;
  offColor?: string;
  offText?: string;
}

在编译时不呈现任何错误。似乎接口的导出无法正常工作……但这只是一个想法。

任何帮助表示赞赏。

Answer 1

由于使用的是角度2，因此必须使用 moduleId

这是一个例子，

@Component({
  moduleId: module.id,
  selector: 'app-punch',
  templateUrl: './punch.component.html',
  styleUrls: [ './punch.component.scss' ]
})

有时，我们必须提供相对路径以避免名称冲突，因此我们必须使用名为“ module.id”的组件注释的属性。通过使用此组件，可以从当前文件夹路径而不是从根目录查看该路径。

角度2 /选择器与组件不匹配

1 个答案: