Angulaire 2 Composant ne montrant pas

Question

J'essaie d'afficher un OAuthComponent dans mon composant GettingStartedPage. Le OAuthComponent ne s'affiche pas lorsqu'il est diffusé sur mon navigateur. Pas d'erreurs

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> 

Answer 1

Tous les composants Angular2 doivent faire référence à d'autres composants qui apparaissent dans la vue.

Ionic semble gérer cela avec leur propre annotation @Page, mais il ne couvre que les composants spécifiques ioniques. decorators.ts explique ce comportement.

Vous devez modifier votre code pour inclure dans OAuthComponentdirectives:

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

Answer 2

Actuellement, j'ai le même problème. C'est lié à jQuery. Si vous avez utilisé les codes jQuery, vous devez les vérifier et les corriger. Mais je ne sais pas comment le réparer complètement!

Plus de détails: Mon problème est que j'utilise la fonction .append() pour ajouter dynamiquement quelque chose à mon tag (après mon composant), mais cela provoque un dysfonctionnement de mon composant. Peut-être une solution est d'utiliser la fonction .appendTo() à la place (cela m'a aidé approximativement). Si vous voulez être sûr que le problème est avec jQuery, essayez de les supprimer partie par partie pour trouver le problème.