2015-12-01 53 views
13

Ich versuche eine OAuthComponent in meiner GettingStartedPage Komponente zu zeigen. Die OAuthComponent wird nicht angezeigt, wenn sie an meinen Browser geliefert wird. Keine Fehler.Angular 2 Component wird nicht angezeigt

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> 

Antwort

9

Alle Komponenten in Angular2 müssen andere Komponenten verweisen, die in der Ansicht erscheinen.

Ionic scheint dies mit ihrer eigenen @Page Annotation zu behandeln, aber es deckt nur ionische spezifische Komponenten ab. decorators.ts erklärt dieses Verhalten.

Sie müssen Ihren Code bearbeiten, um umfassen OAuthComponent in directives:

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

Hinzugefügt 'Direktiven: [OAuthComponent]' und der Import. Es funktioniert immer noch nicht. Änderte meinen ursprünglichen Beitrag, um die Änderung der Richtlinie einzuschließen. – prolink007

0

Derzeit ich das gleiche Problem haben. Es hängt mit jQuery zusammen. Wenn Sie jQuery-Codes verwendet haben, sollten Sie diese überprüfen und beheben. Aber ich weiß nicht, wie ich es komplett reparieren soll!

Weitere Details: Mein Problem ist, dass ich .append() Funktion verwende, um etwas an mein Tag dynamisch (nach meiner Komponente) anhängen, aber es verursacht eine Fehlfunktion meiner Komponente. Vielleicht ist eine Lösung, stattdessen .appendTo() Funktion zu verwenden (es hat mir ungefähr geholfen). Wenn Sie sichergehen möchten, dass das Problem bei jQuery liegt, versuchen Sie, diese Teile für Teile zu entfernen, um das Problem zu finden.