2015-12-01 35 views
13

Tôi đang cố hiển thị số OAuthComponent trong thành phần GettingStartedPage của mình. OAuthComponent không hiển thị khi được cung cấp cho trình duyệt của tôi. Không có lỗi.Góc 2 Thành phần không hiển thị

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> 

Trả lời

9

Tất cả các thành phần trong Angular2 phải tham khảo các thành phần khác xuất hiện trong giao diện.

Ionic dường như xử lý điều này bằng chú thích @Page của riêng chúng, nhưng nó chỉ bao gồm các thành phần cụ thể của Ionic. decorators.ts giải thích hành vi này.

Bạn cần phải chỉnh sửa mã của bạn để bao gồm OAuthComponent trong directives:

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

Đã thêm 'chỉ thị: [OAuthComponent]' và nhập. Nó vẫn không hoạt động. Đã sửa đổi bài đăng gốc của tôi để bao gồm thay đổi chỉ thị. – prolink007

0

Hiện nay, tôi có cùng một vấn đề. Nó liên quan đến jQuery. Nếu bạn đã sử dụng mã jQuery, bạn nên kiểm tra và sửa chúng. Nhưng tôi không biết cách sửa nó hoàn toàn!

Chi tiết khác: Vấn đề của tôi là tôi sử dụng chức năng .append() để gắn thêm thứ gì đó vào thẻ của mình động (sau thành phần của tôi), nhưng nó gây ra sự cố cho thành phần của tôi. Có lẽ một giải pháp là sử dụng hàm .appendTo() thay vào đó (nó đã giúp tôi xấp xỉ). Nếu bạn muốn chắc chắn rằng vấn đề là với jQuery, hãy thử loại bỏ chúng từng phần một để tìm ra vấn đề.

Các vấn đề liên quan