Angular 2 Second Component Not Working？

好的，所以我的應用程序目前有一個模塊，它有兩個組件，一個是一個庫，我用它來啓動我的應用程序。另一個是，或將是我的菜單系統，但是我的A2應用程序似乎不渲染/運行組件。Angular 2 Second Component Not Working？

模塊：

import { NgModule }  from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { MenuComponent } from '../components/menu'; 
import { GalleryComponent } from '../components/gallery'; 

@NgModule({ 
    imports:  [ BrowserModule, HttpModule ], 
    declarations: [ GalleryComponent, MenuComponent ], 
    bootstrap: [ GalleryComponent ] 
}) 

export class AppModule { }

菜單：

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: '[data-menu]', 
    template: `<div></div>` 
}) 

export class MenuComponent { 
    constructor() { 
    console.log('test 99 - const.'); 
    } 
}

所以我的畫廊成分是好的，是沒有任何問題的作品。然而，我設置測試的非常簡單的測試菜單組件，似乎沒有做任何事情。如果我引導組件，它將運行console.log。那麼我到底做錯了什麼？

我一直在A2.io網站上，並再次看到他們有的一些測試示例，但仍然不知道爲什麼這不起作用？

請幫忙。

編輯

我應該說，這種A2應用程序是一個Symfony的2，這是我建JSON API使用與畫廊內運行。

所以我有一個枝杈模板（除了Symfony的）的與我的數據部門我的畫廊裝載部分的標籤，就像這樣：

home.html.twig：

<main> 
    <div id="PublicGallery"> 

     <section data-my-app>// Loading //</section> <- this loads my gallery without any issues! 

    </div> 
</main>

高於這個我是要去但我的導航標籤，但我沒有這樣做，因爲我不能讓第二個A2組件甚至控制檯日誌？

來源

2017-01-05 C0ol_Cod3r

告訴我們你是如何使用畫廊和菜單，我想你將它們添加到你的app.component.html，對吧？你有沒有嘗試爲你的菜單使用另一個選擇器？就像「我的應用程序菜單」一樣，只是爲了仔細檢查模板編譯器是否在那裏做了一些奇怪的事情。 –

您尚未提供足夠的信息來回答此問題。一個給定的模板可以顯示n個組件，但是看起來好像你只有兩個不相連的組件，不以任何方式綁定在一起。你能給我們更多的信息嗎？向我們展示其他組件和模板，例如？ – dparsons

@abszero請看看我的編輯，我希望這就是你想要的？ –

我沒有任何使用Twig或Symfony的經驗（或者在沒有SystemJS的情況下進行引導），所以我不能具體說明你需要在內部完成這項工作。這就是說，有幾件事情會跳到我身上。

因此，我的畫廊組件很好，沒有任何問題。然而，我設置測試的非常簡單的測試菜單組件，似乎沒有做任何事情。

我沒有看到你提供的代碼中的任何地方，你實際上將這兩個組件綁定在一個模板中。

好了，我的應用程序目前有一個模塊，它由兩個部分組成，一個是一個畫廊，我引導啓動我的應用程序

什麼是可能發生的是，組件你是引導在另一個組件中並不搭配。下面的代碼片段來自我目前正在研究的一個應用程序，您應該能夠適應您的需求。由於我不知道你對Angular2的熟悉程度，因此我已經將它寫在了一個非常基礎的層面。

文件：index.html的

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <base href="/"> 
    <title>Some App</title> 

    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 

    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</head> 
<body> 
    <ngApp></ngApp> 
</body> 
</html>

既然你不使用你SystemJS可以忽略一點，但什麼是真正重要的是這裏的ngApp標籤。將這些標籤看作是應用程序其餘部分的入口點。以下組件將使用這些標記作爲放置其輸出的「標記」。

文件：app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'ngApp', 
    templateUrl: './app.template.html' 
}) 

export class AppComponent { 
}

這真的只是樣板代碼並沒有太大的興趣，但是請注意ngApp是此組件的選擇。這是將應用程序綁定到入口點的第一部分。接下來是該組件將使用的模板。

文件：app.template.html

<nav> 
    <data-menu></data-menu> 
</nav> 
<gallery-component></gallery-component>

這很簡單，但很重要。 data-menu和gallery-component標籤是您已寫入的兩個組件將要顯示的位置，但您需要首先對每個組件進行修改。在您的圖庫中將選擇器設置爲：selector: 'gallery-component'並在您的菜單中將選擇器設置爲selector: 'data-menu'接下來，我們需要設置模塊。

文件：這裏app.module.ts

import { NgModule }  from '@angular/core'; 
import { HttpModule } from '@angular/http'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { MenuComponent } from '../components/menu'; 
import { GalleryComponent } from '../components/gallery'; 
import { AppComponent } from '../components/app.component'; 

@NgModule({ 
    imports:  [ BrowserModule, HttpModule ], 
    declarations: [ AppComponent, GalleryComponent, MenuComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { }

請注意，我們包括AppComponent，它是我們引導的成分。最後一件事是確保我們的主文件是有序的。

文件：main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule);

如果運行在這一點上應該顯示與堆積在你的畫廊頂端的菜單組件瀏覽器窗口的應用程序。

一些離別的想法/筆記

你顯然不需要使用templateUrl而是可以使用template如果你喜歡，但我不喜歡直接的模板烤成組件代碼。
對於您的問題，答案要簡短得多，如果您將菜單控件的模板修改爲類似template: <div><gallery></gallery></div>的模板（假設您引導菜單並且圖庫的selector值爲'gallery'），它應顯示出來。這並不是很有用，因爲它將菜單組件緊密地耦合到廚房組件。
說到緊密耦合，您會注意到菜單和圖庫組件現在都與應用程序組件緊密耦合。這也不是非常有用。相反，app.component應該設置爲router-outlet，以便在單擊菜單選項時可以在頁面上加載不同的組件。你可以閱讀關於路由和導航here

如果您有任何問題或者如果我還沒有明確說明，請讓我知道。

來源

2017-01-05 14:15:53 dparsons

許多很多謝謝 - 我有點在閱讀之前得到它非常詳細的答案。我不確定我是否喜歡A2工作的過程，對我而言似乎沒有任何意義 - 您需要一個Parent組件來加載所有要引導的子組件。我得到我的代碼工作，一旦我將標籤添加到我的bootstraped組件，而不是在我的樹枝模板中 - 我明白爲什麼。僅僅是因爲讓組件以這種方式工作，似乎有點奇怪？但使用父組件作爲路由器包裝似乎是一個好主意，我期待着這樣做！非常感謝 –

@ C0ol_Cod3r我不一定認爲這很奇怪，它只是一種思考事物的不同方式。任何給定的網頁只是構成網站的文本和各種組件的容器。在上面的示例中，雖然index.html是實際的頁面，但app.component（特別是它的模板）是頁面上所有內容的主要容器。 – dparsons

我猜，你會需要這個你GalleryComponent模板

<div data-menu></div>

不看你的GalleryComponent。我真的不知道這裏發生了什麼。

來源

2017-01-05 03:25:54 lthh89vt

爲什麼我需要那個？ A）我不希望畫廊組件呈現任何不同的畫廊B）現在第二個組件只是控制檯登錄，所以爲什麼我需要添加數據菜單？ - 但我剛剛添加了一個帶有數據菜單attr的Twig模板的導航標籤，它沒有改變任何東西！ –

Angular 2 Second Component Not Working？

回答

相關問題