Angular 2 Компонент, не отображающий
Я пытаюсь показать OAuthComponent
в моем GettingStartedPage
компоненте. OAuthComponent
не отображается в браузере. Нет ошибок.
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>
Ответы
Ответ 1
Все компоненты в Angular2 должны ссылаться на другие компоненты, которые отображаются в представлении.
Ионный, похоже, справляется с этим с помощью своей аннотации @Page
, но он охватывает только ионные конкретные компоненты. decorators.ts объясняет это поведение.
Вам нужно отредактировать код, чтобы включить OAuthComponent
в directives
:
@Page({
templateUrl: 'app/getting-started/getting-started.html',
directives: [OAuthComponent] // Don't forget to import it
})
export class GettingStartedPage {
Ответ 2
В настоящее время у меня такая же проблема. Это связано с jQuery. Если вы использовали коды jQuery, вы должны проверить и исправить их. Но я не знаю, как это исправить полностью!
Подробнее: Моя проблема заключается в том, что я использую . append(), чтобы добавить что-то в мой тег динамически (после моего компонента) но это вызывает неисправность моего компонента. Возможно, решение заключается в использовании . AppendTo() вместо этого (это помогло мне приблизительно). Если вы хотите убедиться, что проблема связана с jQuery, попробуйте удалить часть по частям, чтобы найти проблему.