Ionic 2 - 潜在的打字稿循环包括拒绝被打破的循环,导致错误

Ionic 2 - Potential typescript circular include cycle that refuses to be broken, causing error

我一直在使用 Ionic 2 构建移动应用程序,基本上我遇到了这样的错误:

EXCEPTION: Error: Uncaught (in promise): Unexpected directive value 'undefined' on the View of component 'TopicFeedPage'

我有一个 Feed 页面(feed.html、feed.ts),其中包含如下组件(<post-added>):

<ion-list [hidden]="chosenFilter !== 'all'">
    <ion-card class="post-card" *ngFor="#post of posts">

      <!-- Post Added -->
      <post-added *ngIf="post.vfeedtype === 1" [post]="post"></post-added>
    </ion-card>
  </ion-list>

在组件内部,我有一个按钮可以推送到一个页面,该页面是一种单独的提要类型,我在其中尝试使用相同的组件(几乎完全相同的代码)。但是,在第二个提要的 .ts 文件中,当我尝试为 @Page 对象中的组件添加指令时,它给出了上述错误。

这是 <post-added> 组件的代码:

import {Component, Input} from 'angular2/core';
import {NavController} from 'ionic-angular';
import {TopicFeedPage} from '../../pages/topic-feed/topic-feed';
import {PostAddedDetailPage} from '../../pages/post-added-detail/post-added-detail';

@Component({
  selector: 'post-added',
  templateUrl: 'build/components/post-added/post-added.html'
})
export class PostAdded {
  @Input() post: any;

  constructor(private nav: NavController) {}

  goToFeedTopic() {
    this.nav.push(TopicFeedPage, this.post);
  }

  goToPost() {
    this.nav.push(PostAddedDetailPage, this.post);
  }

  ngOnInit() {
    this.title = this.post.title.replace(/(<([^>]+)>)/ig,"");
  }
}

经过一些研究,我发现错误可能是由于循环打字稿包含循环造成的,我应该使用前向引用。我已经尝试了所有这些,但仍然遇到同样的错误。任何人都可以为我阐明这一点吗?我还是新手 Angular 2.

这是从上面获取错误的第二个提要的代码 (topic-feed.html, topic-feed.ts):

import {Page, NavParams} from 'ionic-angular';
import {Component, Inject, forwardRef} from 'angular2/core';
import {TopicData} from '../../providers/topic-data/topic-data';
import {PostAdded} from '../../components/post-added/post-added';


@Page({
  templateUrl: 'build/pages/topic-feed/topic-feed.html',
  directives: [PostAdded]
})
export class TopicFeedPage {

  topic: any;
  topicData: any;
  topicDetail: any;
  topicName: any;
  posts: any;
  topicInfo: any;

  constructor(
    private navParams: NavParams,
    private topicFeed: TopicData,
    @Inject(forwardRef(() => PostAdded)) PostAdded
  ) {
    this.topic = navParams.data;

    this.topicDetail = JSON.parse(this.topic.details);

    // Pull the topic name out
    this.topicName = this.topicDetail.topic.topicName;

    // Get the Topic data
    this.topicFeed.getSingleTopicFeed(this.topicDetail.topic.topicId).then(data => {
      this.posts = data.feed;
      this.topicInfo = data.topic;
    });
  }
}

谢谢谢谢谢谢!

已解决:我最终在 app.ts (app.js) 级别而不是在单个 @page 或 @component 级别包含了指令。基本上相同的包含和相同的指令:[PostAdded] 但只是在更全局的层面上。

可能有更好的方法,但我发现它现在有效,我可以在任何地方访问指令而无需多次包含。