Angular 2 Element niewidoczny

Question

Próbuję pokazać OAuthComponent w moim komponencie GettingStartedPage. OAuthComponent nie wyświetla się, gdy wyświetla się w przeglądarce. Bez błędów.

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

wszystkich składników w Angular2 musi odwoływać się inne składniki, które pojawiają się w widoku.

Jonic wydaje się radzić sobie z tym z własną adnotacją @Page, ale obejmuje tylko składniki specyficzne dla jonów. decorators.ts wyjaśnia to zachowanie.

Musisz zmienić swój kod, aby to OAuthComponent w directives:

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

Answer 2

Obecnie mam ten sam problem. Jest związany z jQuery. Jeśli użyłeś kodów jQuery, powinieneś sprawdzić i naprawić je. Ale nie wiem jak to naprawić całkowicie!

Więcej szczegółów: Problem polega na tym, że używam funkcji .append() do dynamicznego dodawania czegoś do mojego tagu (po moim komponencie), ale powoduje to nieprawidłowe działanie mojego składnika. Może rozwiązaniem jest użycie funkcji .appendTo() (pomogło mi to w przybliżeniu). Jeśli chcesz mieć pewność, że problem dotyczy jQuery, spróbuj usunąć je po części, aby znaleźć problem.