Question

好的，所以我的应用程序目前有一个模块，它有两个组件，一个是一个库，我引导它来启动我的应用程序。另一个是，或者将是我的菜单系统，但是我的A2应用程序似乎没有渲染/运行组件。

模块：

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。

所以我有一个Twig模板（Symfony除外）为我的图库加载了我的数据扇区的section标签，如下所示：

home.html.twig：

<main>
    <div id="PublicGallery">

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

    </div>
</main>

除此之外我还会使用我的导航标签，但我还没有这样做，因为我无法获得第二个A2组件甚至控制台日志？

Answer 1

我没有任何与Twig或Symfony合作的经验（或者没有SystemJS的引导），所以我不能具体说明你需要做些什么来完成这项工作。话虽这么说，有些事情会突然冒出来。

所以我的画廊组件很好，没有任何问题。然而，我设置测试的非常简单的测试菜单组件似乎没有做任何事情。

我没有看到您提供的代码中的任何位置，您实际上将这两个组件绑定在一个模板中。

好的，所以我的应用程序目前有一个模块，它有两个组件，一个是一个库，我引导它来启动我的应用程序

可能发生的事情是你引导的组件没有绑定在另一个组件中。下面的代码段来自我目前正在处理的应用程序，您应该能够适应您的需求。我已经在非常基础的层面上写了这篇文章，因为我不知道你对Angular2的熟悉程度。

file：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标签。将这些标记视为应用程序其余部分的入口点。以下组件将使用这些标记作为标记＆＃39;在哪里放置它的输出。

file：app.component.ts

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

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

export class AppComponent {
}

这实际上只是样板代码并没有太大的兴趣，但请注意 ngApp 是此组件的选择器。这是将您的应用程序绑定到入口点的第一部分。接下来是该组件将使用的模板。

file：app.template.html

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

这很简单，但很重要。 data-menu和gallery-component标记是您已编写的两个组件的显示位置，但您需要先对每个组件进行修改。在您的图库中，将选择器设置为：selector: 'gallery-component'，然后在菜单中将选择器设置为selector: 'data-menu'接下来我们需要设置模块。

file：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，它是我们引导的组件。最后一件事是确保我们的主文件是有序的。

file：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' {1}}它应该显示。这并不是很有用，因为它将菜单组件与厨房组件紧密结合在一起。
说到紧耦合，您会注意到菜单和图库组件现在都与应用程序组件紧密耦合。这也不是非常有用。相反，应该使用router-outlet设置app.component，以便在单击菜单选项时可以在页面上加载不同的组件。您可以阅读有关路由和导航here

如果您有任何疑问或者我没有说清楚，请告诉我。

Answer 2

我想，你需要在GalleryComponent模板

中使用它

<div data-menu></div>

不看你的GalleryComponent。我无法真实地告诉我们这里发生了什么。

角度2秒组件不起作用？

2 个答案: