我有两个不同的组件 - 一个组件具有列表用户的点击事件方法，我想继承(调用)在详细信息页面上单击事件方法(另一个组件)
怎么做，请帮帮我...
答案更新
感谢您的回答。
我通过使用扩展类并在构造函数中使用super()得到了解决方案。
头等舱
export class TeamsView {
constructor(private test:TestService){
}
...
}
二等舱
export class TeamsForm extends TeamsView {
constructor(private test:TestService, private router: Router){
super(test)
}
...
}
1. 从一个组件调用到另一个组件(如果它们不是父组件和子组件)的方法只能使用服务。
//FirstComponent
import {Component} from '@angular/core';
import {CommonService} from './common.service';
@Component({
selector: '<first-component></first-component>',
template: 'some html here',
providers: [CommonService]
})
export class FirstComponent {
constructor(private _service: CommonService) {
this._service.callMethodOfSecondComponent();
}
}
//CommonService
import {Subject} from 'rxjs/Subject';
@Injectable()
export class CommonService {
invokeEvent: Subject<any> = new Subject();
callMethodOfSecondComponent() {
this.invokeEvent.next(someValue)
}
}
//SecondComponent
import {Component, OnInit} from '@angular/core';
import {CommonService} from './common.service';
@Component({
selector: '<second-component></second-component>',
template: 'some html here',
providers: [CommonService]
})
export class SecondComponent {
constructor(private _service: CommonService) {
this._service.invokeEvent.subscribe(value => {
if(value === 'someVal'){
this.callMyMethod();
}
});
}
callMyMethod(){
//code block to run
}
}
2. 从子组件调用父组件的方法
//Child Component
import {Component} from '@angular/core';
@Component({
selector: '<child-component></child-component>',
template: 'some html here',
})
export class ChildComponent {
@Output()
emitFunctionOfParent: EventEmitter<any> = new EventEmitter<any>();
constructor() {
}
someMethodOfChildComponent(){
this.emitFunctionOfParent.emit(someValue);
}
}
//ParentComponent
import {Component} from '@angular/core';
@Component({
selector: '<parent-component></parent-component>',
template: `some html
<child-component
(emitFunctionOfParent)="myMethod($event)">
</child-component>
some html
`,
})
export class ParentComponent {
constructor() {
}
myMethod(someValue){
// i am called
}
}
3. 从父组件调用子组件的方法
//Child Component
import {Component} from '@angular/core';
@Component({
selector: '<child-component></child-component>',
template: 'some html here',
})
export class ChildComponent {
constructor() {
}
someMethodOfChildComponentToBeCalled(){
// i am called
}
}
//Parent Component
import {Component, OnInit} from '@angular/core';
import {ChildComponent} from './child.component';
@Component({
selector: '<parent-component></parent-component>',
template: `some html
<child-component>
</child-component>
some html
`
})
export class ParentComponent implements OnInit {
@ViewChild(ChildComponent) private _child:
ChildComponent;
ngOnInit() {
this._child.someMethodOfChildComponentToBeCalled();
}
}
除了这些之外，可能还有其他沟通方式。 :)
你可以试试这个：
<first-component (click)="mySecondComponent.myFunction()"></first-component>
<second-component #mySecondComponent></second-component>
myFunction必须是公开的。
要获得更清洁的解决方案，请遵循此过程。
注意：在一个组件中调用以下方法，该方法从服务调用事件发射器并将其发送到另一个组件。
service.ts:
import {Subject} from 'rxjs/Subject';
private emitter: Subject<any> = new Subject<any>();
set() {
this.emitter.next({command: 'set', params:{a:1, b:2});
};
getChangeEmitter() {
return this.emitter;
}
component.ts
import {Subscription} from 'rxjs/Subscription';
private listener: Subscription;
ngOnInit(): void {
// Listen for changes in the service
this.listener = this._service.getChangeEmitter()
.subscribe(paramsFromService => {
switch (paramsFromService.command) {
case 'set':
this.setMethod(paramsFromService);
break;
default:
this.defaultMethod(paramsFromService);
break;
}
});
}
在服务中添加常用方法
import {Injectable} from '@angular/core';
@Injectable()
export class MyService {
constructor() { }
doSomething(val) {
return !val;
}
}
通过注入该服务在组件中使用它，下面是一个组件代码。在其他组件中也写同样的东西。
import {Component, OnInit} from '@angular/core';
import {MyService} from './shared/my-service'; // see angular.io/styleguide
@Component({
selector: '<my-component></my-component>',
templateUrl: 'app/name.component.html',
// This is unnecessary when installing MyService within Root NgModule
providers: [MyService]
})
export class MyComponent implements OnInit {
value1: boolean = true;
constructor(private ms: MyService) {}
ngOnInit() { }
click() {
this.ms.doSomething(value1);
}
}
HTML
<input type="button" (click)="click()">
我通过使用extend Class并在构造函数中使用super()得到了解决方案。
头等舱
export class TeamsView {
constructor(private test:TestService){
}
...
}
二等舱
export class TeamsForm extends TeamsView {
constructor(private test:TestService, private router: Router){
super(test)
}
...
}
我不知道它在构造函数中调用类以解决此问题的真正方法，但我从其中一个 Angular 站点中找到了它，并且它也对我有用。
1.) 首先，您需要将第一个组件导入目标组件。
import { FirstComponent } from '../first.component';
2.) 然后你需要像这样创建第一个组件的对象：
FirstComponentObject = new FirstComponent();
3.) 然后从目标(当前)组件调用第一个组件的函数
FirstComponentObject.FirstComponentFunction();
如果您需要任何帮助，请发表评论。感谢您的阅读。