Angular2 - 导出自定义管道的方法

Question

我有一个导航组件，我想调用一个应用自定义管道的方法。当我尝试引用它时，我得到 filterPortfolio 未在控制台中定义。

我将此方法绑定到我的 DOM 中的单击事件（html 由导航组件应用。

我的html：

<div id="filter1" class="miniNavButton" *ngIf="portfolio" (click)="changeFilter('demo')">
    <a>
        <svg class="icon icon-eye">
            <use xlink:href="symbol-defs.svg#icon-eye"></use>
        </svg>
    </a>
</div>

portfolio.component.ts：

import { Component } from 'angular2/core';
import {ViewEncapsulation} from 'angular2/core';
import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({ name: 'pagesFilter' })
class pagesFilter implements PipeTransform {
    transform(pages, [key]): string {
        return pages.filter(page => {
            return page.hasOwnProperty(key);
        });
    }
}

@Component({
    selector: 'portfolio',
    templateUrl: '/app/views/portfolio.html',
    styleUrls: ['../app/styles/PortfolioMobile.css', '../app/styles/PortfolioOther.css'],
    pipes: [pagesFilter],
    encapsulation: ViewEncapsulation.None
})

export class PortfolioComponent {
    pages = [{
        img: './app/images/placeholder.png',
        name: 'veryNiceWords',
        repo: 'https://github.com/Shooshte/veryNiceWords',
        description: 'A hobby app, made to enable posting, rating and sharing quotes over social networks. Work in progress.',
        github: true
    },
        {
            img: './app/images/placeholder.png',
            name: 'ZIC IJS',
            repo: 'https://github.com/Shooshte/ZIC',
            description: 'Refurbishing of on old library webpage with AngularJS.',
            github: true
        },
        {
            img: './app/images/weather.png',
            name: 'Show the Local weather',
            repo: 'http://codepen.io/shooshte/pen/NxOwOX',
            description: 'A freeCodeCamp exercise, designed to show the local weather.',
            demo: true,
            finished: true
        },
        {
            img: './app/images/calculator.png',
            name: 'Calculator',
            repo: 'http://codepen.io/shooshte/pen/qbjJdy',
            description: 'A freeCodeCamp exercise, which requires you to build a javascript calculator.',
            demo: true,
            finished: true
        },
        {
            img: './app/images/github.png',
            name: 'MTGO Draft Replayer',
            repo: 'https://github.com/Shooshte/MTGO-Draft-Replayer',
            description: 'A simple web app that opens a MTGO draft log file, and re-creates the draft from it.',
            github: true
        },
        {
            img: './app/images/codeeval.png',
            name: 'codeEval',
            repo: 'https://github.com/Shooshte/CodeEval',
            description: 'CodeEval challenges solutions written in javascript and posted to gitHub.',
            github: true,
            finished: true
        }];

        filterPortfolio(parameter:String) {
            return this.pages ? 'pagesFilter' : parameter
        };
}

navigation.component.ts

import { Component } from 'angular2/core';
import {ViewEncapsulation} from 'angular2/core';
import { Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';

import { LandingComponent } from './landing.component';
import { PortfolioComponent } from './portfolio.component';
import { SkillsComponent } from './skills.component';
import { ContactComponent } from './contact.component';

@Component({
    selector: 'my-navigation',
    templateUrl: '/app/views/navigation.html',
    styleUrls: ['../app/styles/navigationMobile.css', '../app/styles/navigationOther.css'],
    encapsulation: ViewEncapsulation.None,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

export class NavigationComponent {
    landing = true;
    portfolio = false;

    changeMiniNavLanding = function() {
       this.landing = true;
       this.portfolio = false;
    }

    changeMiniNavPortfolio = function() {
       this.landing = false;
       this.portfolio = true;
    }

    changeFilter(a) {
        PortfolioComponent.apply(filterPortfolio(a));
    }
}

这是通过 pages 对象（我想应用管道的页面）迭代的 html：

<div class="portfolioContainer">
    <div *ngFor="#p of pages" class="portfolioPageContainer">
        <img [attr.src]="p.img" class="portfolioThumbnail">
        <h2>{{ p.name }}</h2>
        <a [attr.href]="p.repo">
            <div>
                <p>{{ p.description }}</p>
            </div>
            <p class="portfolioRepoLink">See the Code!</p>
        </a>
    </div>
</div>

所以投资组合组件应该导出调用过滤器的方法，导航组件应该调用该方法。我以为这已经通过导入整个组件来完成，但我无法让它工作。

我知道这可能有点令人困惑。如果它有帮助，这里有一个 github 整个事情的回购 - 只需克隆，转到投资组合并运行 npm start。相关文件位于视图下（portfolio.html、navigation.html）和应用文件夹中（portfolio.component.ts、navigation.component.ts）。

谁能指出我做错了什么？谢谢。

Answer 1

filterPortfolio 方法是PortfolioComponent 类的一部分，因此您可以这样调用它。我认为您没有正确使用apply 方法：

PortfolioComponent.prototype.filterPortfolio.apply(this, [a]);

或call一：

PortfolioComponent.prototype.filterPortfolio.call(this, a);

话虽如此，我不确定您是否使用了正确的方法，而且我看不到您在代码中使用 pagesFilter 管道的任何地方。

Günter 过去对此类问题给出了很好的回答。有关详细信息，请参阅此问题：

• Angular2 - assign pipe from a variable