Question

我想从另一个组件调用一个函数。

为了更详细地描述它，我有一个模块，里面有3-4个不同的组件。其中一个是侧边栏，侧边栏包含带有其他组件链接的标签。其中一个链接组件包含一个表，可以按3/4不同的功能进行排序。

以前我在组件中手动编写了侧边栏代码，该代码具有表格，可以使用此代码。

我的主要组件包含左列和右列，左列永远不会更改，它包含一个外部组件和一个侧栏，右栏会更改。

<div class="wrapper">
    <div class="leftCol">
        <info></info>
        <sidebar></sidebar>
    </div>
    <div class="rightCol">
        <router-outlet></router-outlet>
    </div>
</div>

在我的侧边栏中，我制作了这样的标签：

 <label [routerLink]="['/users']" (click)="sortByName('all'); currSort='abc'">ABC</label>

当我按下这个标签时，我想要实现的是打开/用户，它可以工作，但它不会执行位于用户组件中的命令sortByName。

sortByName(str) {
    this.users = [];
    let token = localStorage.getItem('feathers-jwt');
    this.userService.getUsers(token).subscribe(res => {
      let users = res.data.sort((a, b) => {
        if (a.lastname.toLowerCase() < b.lastname.toLowerCase()) return -1;
        if (a.lastname.toLowerCase() > b.lastname.toLowerCase()) return 1;
        return 0;
      });
      for (let i = 0; i < users.length; i++) {
        let char = users[i].lastname.charAt(0).toUpperCase();
        if (str == 'all' || char == str.toUpperCase()) {
          let object = { name: char, array: [] }
          for (let j = 0; j < users.length; j++) {
            if (char == users[j].lastname.charAt(0).toUpperCase()) {
              object.array.push(users[j]);
              users.splice(j, 1);
              j = -1;
            }
          }
          i = -1;
          this.users.push(object);
        }
      }
      this.clicks = 0;
    }, err => {
      this.toast.error('Loading users', 'FAILED')
    })
  }

将此功能放在侧栏component.ts中也不起作用。

为了让侧边栏标签打开链接网站并点击执行功能，我该怎么做？

提前致谢。

Answer 1

您可以在routerlink中添加sorting-rule-parameter（关键字：paramMap）然后，用户显示组件可以包含排序功能，或者更好地根据给定的参数调用排序服务。 https://angular.io/tutorial/toh-pt5#extract-the-id-route-parameter 组件应该只包含他们真正需要/使用的字段和方法。其他所有内容都应该扩展到不同的组件，模块和（共享）服务

Answer 2

如果这些不是兄弟姐妹：Change Boolean from another component in angular 4

如果要访问子组件方法：How to call sibling component method in angular 4?

如何从其他组件

2 个答案: