基于组件Angular 2的调用函数答案

【问题标题】：Call function based on component Angular 2基于组件Angular 2的调用函数
【发布时间】：2018-02-10 13:10:43
【问题描述】：

我有三个组件（配置文件、页面、组），每个组件都称为<app-posts [data]="post"></app-posts>，在我的posts.component.html 中有这个<a> 标签：

<a id="load-more-button" (click)="myQuestion()">Load More</a>

我想根据我现在所在的组件替换myQuestion() 函数，如果我在个人资料中，我希望myQuestion() 成为myProfile()，与页面和组相同。

我考虑为每个组件提供服务，并且每次检查我在哪里，但在我看来这很愚蠢，有什么想法吗？

【问题讨论】：

标签： angular

【解决方案1】：

posts.component.ts

在您的posts.component.ts 中定义一个名为loadMore 的@Output() 绑定。每次用户单击链接时，event 都会发出并将此事件委托给他的父组件（页面、组、配置文件）

@Component({
  selector: 'app-posts',
  template: `
   <a id="load-more-button" (click)="loadMore.emit()">Load More</a>
  `,
  styleUrls: ['./app.component.css']
})
export class PostsComponent {

  @Input() data: any;

  @Output() loadMore: EventEmitter<any> = new EventEmitter();
}

个人资料、页面、组组件.ts

在您的父组件中监听loadMore 事件。

例如简介：

@Component({
  selector: 'app-profile',
  template: `
   <app-posts [data]="profiles" (loadMore)="onLoadMoreProfiles()"></app-posts>
  `,
  styleUrls: ['./app.component.css']
})
export class ProfileComponent {

  profiles: any

  onLoadMoreProfiles() {
   // load more profile or whatever
  }      


}

对group.component.ts 和page.component.ts 重复此模式

【讨论】：

太棒了！但是如果我想在我的post.component.ts 中调用这个函数怎么办？loadmore 的默认值是什么？
我不清楚你到底是什么意思，但通过我的方法，你可以将功能与 posts component.ts 分离。由于您已经将数据导入posts.component.ts，因此您可以在某处获取它们，并且最好在最初获取它们的相同位置添加“获取更多”功能。在我看来，这使您的代码更加合理和易于理解。

【解决方案2】：

可以在组件本身绑定函数地址

component.ts

export default class MyComponent {
    //myFunctionAdress = /** assign function based on component**/;
    //example:
    myFunctionAdress = this.myFuncion;

    myFunction() {

    }
}

component.html

<a (click)="myFunctionAdress()">Load More</a>

【讨论】：

【解决方案3】：

正确的方法是传递一个属性值，它会让你的组件知道它在当前上下文中的行为。并且取决于你内部的myQuesition()函数的句柄。

因此，在 3 个地方，您向组件传递了不同的值：

<app-posts [data]="post" [profile]="'question'"></app-posts>
<app-posts [data]="post" [profile]="'profile'"></app-posts>
<app-posts [data]="post" [profile]="'question'"></app-posts>

你的看法：

 <a id="load-more-button" (click)="question()">Load More</a>

在你的posts.component.ts:

export class FriendComponent {
    @Input() funcType: string = 'profile';

    constructor() {}

    question(){
        if(this.funcType === 'profile'){
           this.myQuestion();
         } else if (this.funcType === 'question'){
           this.myProfile();
         }
    }
}

【讨论】：