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] 但只是在更全局的层面上。
可能有更好的方法,但我发现它现在有效,我可以在任何地方访问指令而无需多次包含。
我一直在使用 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] 但只是在更全局的层面上。
可能有更好的方法,但我发现它现在有效,我可以在任何地方访问指令而无需多次包含。