我有一个组件<my-component>
在 Angular 5 中
@Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent {
click(param: string){
console.log(param);
}
在我的 html 中我有这样的内容:
<my-component (click)="click('Hello world')"></my-component>
我需要覆盖点击函数来执行:
console.log('Param: ' + param);
我该怎么做???
最佳答案
在你的app.module.ts中
import { OriginalComponent } from './original/original.component';
import { MockOfOriginalComponent } from './mock/mock-of-original.component';
@NgModule({
declarations: [
AppComponent,
WelcomeComponent,
OriginalComponent,
MockOfOriginalComponent
],
providers: [],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot([
{ path: 'welcome', component: WelcomeComponent },
{ path: 'pm-mock-of-original', component: MockOfOriginalComponent },
{ path: 'pm-original', redirectTo: 'pm-mock-of-original' },
]),
],
bootstrap: [AppComponent]
})
export class AppModule { }
你的原始组件
@Component({
moduleId: module.id,
selector: 'pm-original',
templateUrl: 'original.component.html',
styleUrls: ['original.component.scss']
})
export class OriginalComponent {
}
你的MockOfOriginalComponent
@Component({
moduleId: module.id,
selector: 'pm-mock-of-original',
templateUrl: 'mock-of-original.component.html',
styleUrls: ['mock-of-original.component.scss']
})
export class MockOfOriginalComponent {
}
诀窍是 AppModule 中的重定向
{ path: 'pm-mock-of-original', component: MockOfOriginalComponent },
{ path: 'pm-original', redirectTo: 'pm-mock-of-original' }
我在本地测试过,它工作正常。如果没有尝试这个
{ path: 'pm-mock-of-original', component: MockOfOriginalComponent },
{ path: 'pm-original', redirectTo: 'pm-mock-of-original', pathMatch: 'full' }
当您从(外部)模块导入这两个组件时,这也适用。
关于angular - 如何覆盖 Angular 5 中的组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49324053/