如何包含多個組件，然後從一個到另一個可能調用一個功能

Question

因此，對於AngularJS 2，我仍然很新，並且有幾個問題我一直無法找到明確的在線答案。

我的第一個問題是如何在你的angular2應用程序中包含多個組件？這是我目前正在做的事，但我相信我做錯了。此外，你能看看我包括一項服務嗎？

bootstrap.ts

// DEPENDENCIES GO HERE 

bootstrap(App,[ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS, 
    provide(LocationStrategy, {useClass: HashLocationStrategy}) 
]); 

app.ts

// DEPENDENCIES GO HERE 

import {Socket} from './services/socket.ts'; // Socket.io Service 
import {Second} from './pages/secondComponent.ts'; 

@Component({ 
    selector: 'main-component' 
}) 
@View({ 
    templateUrl: '/views/template.html', 
    directives: [Second] 
}) 
@RouteConfig([ 
    new Route({path: '/', component: Home, as: 'Home'}), 
    new Route({path: '/home', component: Home, as: 'Home'}) 
]) 
export class App { 
    router: Router; 
    location: Location; 
    socket: Socket; 

    constructor(router: Router, location: Location) { 
    this.router = router; 
    this.location = location; 
    this.socket = new Socket(); // <-- Is this how to use a "service"? I'm sure this is wrong as I would need to create a new socket instance every time I wanted to use it? Singleton? 
    } 
} 

secondComponent.ts

// DEPENDENCIES GO HERE 

@Component({ 
    selector: 'second-component' 
}) 
@View({ 
    templateUrl: '/views/second.html' 
}) 
export class Second { 
    constructor() { 

    } 
    public callme() { 
     return "I work!"; 
    } 

} 

如果我包括在所述@view的內部的第二組分作爲指令app.ts文件加載，但我相信這是錯誤的，因爲它是一個組件，而不是一個指令。

最後，我將如何去在app.ts文件中調用secondComponent.ts文件中的「callme（）」函數？

var second = new Second(); 
second.callme() 

工作，但不知道如果這是正確的，因爲我認爲它是實例化組件？

我感謝您的幫助。

乾杯！

Answer 1

我的第一個問題是如何在angular2應用程序中包含多個組件？

// Note that @View is optional 
// see https://github.com/angular/angular/pull/4566 
@Component({ 
    directives : [Cmp1, Cmp2, Cmp3, Cmp4, CmpN] 
}) 

// Or 
@Component({}) 
@View({ 
    directives : [Cmp1, Cmp2, Cmp3, Cmp4, CmpN] 
}) 

關於如何注入Services。它比簡單得多（angular2爲您創建實例，就沒有必要爲new;））

@Component({ 
    selector: 'main-component', 
    providers : [Socket] // <-- Inject it into the component 
}) 
export class App { 
    socket: Socket; 

    constructor(socketSvc: Socket) { // <-- Get the instance created above 
    this.socket = socketSvc; 
    } 
} 

你可以看到viewProviders下它的一個例子。

如果我在app.ts文件的@view文件中包含第二個Component作爲指令，它會加載，但我認爲這是錯誤的，因爲它是組件而不是指令。

但絕對沒有錯，通過directives財產，包括您的成分，其實這是你如何做到這一點，也Components extends from Directives。

最後，我將如何去調用second.ponent文件中的「callme（）」函數從app.ts文件？

你只要查詢應用程序的兒童

export class App implements AfterViewInit { 
    // Assuming you have only one 'Second' child, if you have multiple you must use @ViewChildren 
    @ViewChild(Second) second: QueryList<Second>; 

    afterViewInit() { 
    this.second.callMe(); 
    } 
} 

我建議你去通過tutorial，你缺少它提到的一些基本步驟。