角度自定义标签未呈现和执行功能

时间:2019-10-17 10:40:31

标签: html angular typescript angular-components custom-tag

我在html中有一个自定义标签。在我的next.component.ts文件中,

@Component({
  selector: 'nextbutton',
  template: ` <button (click) = "nextfunc()">Next</button> `
})

export class NextComponent{

  nextfunc() {

== >>我的app.component.html文件

<div>
<!--other tags-->
<next-button></next-button>

</div>

我无法呈现按钮并访问nextfunc()

=== >>我的app.module.ts


    import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';
import { NextComponent } from './next.component';


@NgModule({
  declarations: [
    AppComponent,
    NextComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule { }

=== >>我的next.component.ts

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

@Component({
  selector: 'nextbutton',
  template: ` <button (click) = "nextfunc()">Next</button> `
})

export class NextComponent{

  nextfunc() {
     //do something
  }
}

1 个答案:

答案 0 :(得分:2)

在将标记用作

时,您在“指令/组件”中的选择器为下一步按钮
 <next-button></next-button>

将选择器更改为下一个按钮,或将标签更改为下一个按钮