typescript - proyecto - El componente angular 2 no se muestra

elementref angular 4 example

Question

Estoy tratando de mostrar un OAuthComponent en mi componente GettingStartedPage . El OAuthComponent no se muestra cuando se sirve en mi navegador. Sin errores.

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

Todos los componentes en Angular2 deben hacer referencia a otros componentes que aparecen en la vista.

Ionic parece manejar esto con su propia anotación @Page , pero solo cubre componentes específicos iónicos. decorators.ts explica este comportamiento.

Necesita editar su código para incluir OAuthComponent en directives :

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

Answer 2

Actualmente, tengo el mismo problema. Está relacionado con jQuery. Si usó códigos jQuery, debería verificarlos y corregirlos. ¡Pero no sé cómo solucionarlo por completo!

Más detalles: Mi problema es que uso la función .append () para añadir algo a mi etiqueta de forma dinámica (después de mi componente), pero causa un mal funcionamiento de mi componente. Tal vez una solución es usar la función .appendTo () en su lugar (me ayudó aproximadamente). Si desea asegurarse de que el problema es con jQuery, intente eliminarlos parte por parte para encontrar el problema.