angular - 错误类型错误 : _co. function_name 不是函数

Question

我想将一个 HTML 页面(组件)用于另一个组件。但是我找不到点击事件。

Dashboard.component :-

import { Component, OnInit, AfterViewInit} from '@angular/core';
import { Router } from '@angular/router';
import { ViewChild } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';  // replaces previous Http service
import { Http, Response , RequestOptions , Headers , URLSearchParams } from '@angular/http';
import { FormsModule, ReactiveFormsModule , FormGroup} from '@angular/forms';
import { HttpModule } from '@angular/http';
import 'rxjs/Rx';
import { webserviceurl } from '../../url.constants';
import { AppAsideComponent } from '../../components/app-aside/app-aside.component';

export class DashboardComponent implements AfterViewInit{

            constructor(private router:Router,private http:Http) {          
            }

            ngAfterViewInit(): void {
            }

            save_outage_index(){
              console.log('click');
            }

}

仪表板.module.ts :-

import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

import { DashboardComponent } from './dashboard.component';
// import { AppAsideComponent } from './../../components/app-aside/app-aside.component';
import { DashboardRoutingModule } from './dashboard-routing.module';

import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
// import { CommonModule } from '@angular/common';
// import { GridModule } from '../../modules/grid.module';
// import { PanelModule } from '../../modules/panel.module';

@NgModule({
  imports: [
    DashboardRoutingModule,
    ChartsModule,
    BsDropdownModule,

  ],
  declarations: [ DashboardComponent,jqxGridComponent]
})
export class DashboardModule { }

app-aside.component.html :-

<button type="button" (click)="save_outage_index()" class="btn btn-sm btn-primary" style="background-color: #455D43;" ><i class="fa fa-dot-circle-o"></i> Submit</button>

app-aside.component.ts :-

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

@Component({
  selector: 'app-aside',
  templateUrl: './app-aside.component.html'
})
export class AppAsideComponent {

  constructor() { }
}

我的问题是如何使用 app-aside.component.ts 到 dashboard.component.ts。

我已经在 dashboard.module.ts 和 dashboard.component.ts 中尝试使用这段代码。

import { AppAsideComponent } from './../../components/app-aside/app-aside.component';

然后像这样在声明中使用AppAsideComponent，

@NgModule({
  imports: [
    DashboardRoutingModule,
    ChartsModule,
    BsDropdownModule,

  ],
  declarations: [ AppAsideComponent,DashboardComponent,jqxGridComponent]
})

但它仍然显示错误，co.save_outage_index 不是一个函数，

Answer 1

点击处理程序 save_outage_index 需要在与模板相同的组件中定义。

所以需要在app-aside.component.ts文件中添加handler

@Component({
  selector: 'app-aside',
  templateUrl: './app-aside.component.html'
})
export class AppAsideComponent {

  constructor() { }


    save_outage_index(){
      console.log('click');
    }
}

现在，如果您想在仪表板中包含应用程序端组件，您需要将此 html 添加到仪表板组件的 html 中

dashboard.component.html

<app-aside></app-aside>

如果它们在同一个模块中，则没有额外的工作。如果没有，您需要在仪表板模块中导入包含应用程序端组件的模块