2015-12-01 13 views
13

GettingStartedPageコンポーネントにOAuthComponentを表示しようとしています。ブラウザにサービスを提供すると、OAuthComponentが表示されません。エラーはありません。角2コンポーネントが表示されない

OAuthComponent.ts 

import {Page, NavController} from 'ionic/ionic'; 
import {Component} from 'angular2/angular2' 

@Component({ 
    templateUrl: "app/authentication/components/oauth-component.html", 
    selector: "oauth-component" 
}) 
export class OAuthComponent { 

    private nav: NavController; 

    constructor(nav: NavController) { 
     this.nav = nav; 
    } 
} 

oauth-component.html 

<h1> 
    Testing Something 
</h1> 

GettingStartedPage.ts 

import {Page, NavController} from 'ionic/ionic'; 
import {OAuthComponent} from "../authentication/components/OAuthComponent"; 
import "./getting-started.scss"; 

@Page({ 
    templateUrl: 'app/getting-started/getting-started.html', 
    directives: [OAuthComponent] 
}) 
export class GettingStartedPage { 

    private nav: NavController; 

    constructor(nav: NavController) { 
     this.nav = nav; 
    } 
} 

getting-started.html 

<ion-navbar *navbar> 
    <a menu-toggle> 
     <icon menu></icon> 
    </a> 

    <ion-title>Getting Started</ion-title> 
</ion-navbar> 

<ion-content> 
    <main> 
     <oauth-component></oauth-component> 
    </main> 
</ion-content> 

答えて

9

Angular2のすべてのコンポーネントは、ビューに表示される他の構成要素を参照しなければなりません。

Ionicはこれを独自の@Pageアノテーションで処理しているようですが、イオン固有のコンポーネントのみをカバーしています。 decorators.tsはこの現象を説明しています。

@Page({ 
    templateUrl: 'app/getting-started/getting-started.html', 
    directives: [OAuthComponent] // Don't forget to import it 
}) 
export class GettingStartedPage { 
+1

ディレクティブ:[OAuthComponent]とインポートを追加しました。まだ動作していません。オリジナルの投稿を変更して指示の変更を追加しました。 – prolink007

0

現在、私は同じ問題を抱えている:

あなたはOAuthComponentdirectivesに含めるようにコードを編集する必要があります。これはjQueryに関連しています。 jQueryコードを使用している場合は、それらをチェックして修正する必要があります。しかし、私はそれを完全に修正する方法を知らない!

詳細:私の問題は、.append()機能を使用して、タグに動的に(コンポーネントの後に)何かを追加することですが、コンポーネントが誤動作する原因になります。たぶん、解決策は代わりに.appendTo()関数を使用することです(それはおおよそ私を助けました)。問題がjQueryであることを確認したい場合は、問題を見つけるために部分的に削除してみてください。