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？

回答

相关问题