2015-12-01 18 views
13

Sto tentando di mostrare un OAuthComponent nel mio componente GettingStartedPage. Il OAuthComponent non viene visualizzato quando viene pubblicato sul mio browser. Nessun erroreAngolare 2 Componente non visualizzato

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> 

risposta

9

Tutti i componenti Angular2 deve fare riferimento ad altri componenti che appaiono nella vista.

Ionic sembra gestire questo con la propria annotazione @Page, ma copre solo componenti specifici ionici. decorators.ts spiega questo comportamento.

È necessario modificare il codice per includere OAuthComponent in directives:

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

Aggiunte le "direttive: [OAuthComponent]" e l'importazione. Non funziona ancora. Modificato il mio post originale per includere la modifica della direttiva. – prolink007

0

Attualmente, ho lo stesso problema. È legato a jQuery. Se hai usato i codici jQuery, dovresti controllarli e correggerli. Ma non so come aggiustarlo completamente!

Maggiori dettagli: Il mio problema è che io uso .append() funzione per aggiungere qualcosa al mio tag in modo dinamico (dopo la mia componente), ma provoca malfunzionamenti mia componente. Forse una soluzione è usare la funzione .appendTo() invece (mi ha aiutato circa). Se vuoi essere sicuro che il problema sia con jQuery, prova a rimuoverli parte per parte per trovare il problema.