Question

我的Meteor / Angular2应用程序出了问题。我有一个启动组件（AppComponent），我可以加载这很好，一切正常，我想要的。但现在我添加了标记＆＃39; map＆＃39;到我的AppComponent模板并创建组件MapComponent 。现在，每当我尝试打开应用程序时（在localhost：3000上），应用程序冻结并崩溃。我无法打开开发人员工具。

我给你发了我的档案： app.module.ts：

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { MapComponent } from './map/map.component';

@NgModule({
  // Components, Pipes, Directive
  declarations: [
    AppComponent,
    MapComponent

  ],
  // Providers
  providers: [],
  // Modules
  imports: [
    BrowserModule
  ],
  // Main Component
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import { Component } from "@angular/core";
import template from "./app.component.html";
import style from "./app.component.scss";

@Component({
  selector: "app",
  template: `<nav class="navbar">Navbar</nav>
<div class="mapbox">
    <map></map>
</div>
<footer class="footer">Footer</footer>`,
  styles: [ style ]
})
export class AppComponent {
}

map.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'map',
    template: `<div class="container">
    Test
</div>`,
    styleUrls: ['../app.component.scss']
})
export class MapComponent {

}

我希望你能帮助我。提前致谢添

Answer 1

当您使用Angular中的styleUrls（而不是来自angular2-meteor的import style from './path/to/stylesheet'）时，请记住：

URL相对于应用程序根，它通常是托管应用程序的index.html网页的位置。样式文件URL相对于组件文件不。

参考：https://angular.io/docs/ts/latest/guide/component-styles.html#!#style-urls-in-metadata

因此，在您的情况下，您可以在map.component.ts文件中写下：

import { Component } from '@angular/core';
@Component({
    selector: 'map',
    template: `<div class="container">
    Test
</div>`,
    styleUrls: ['app/app.component.scss'] // From location of index.html
})
export class MapComponent {}

演示：https://plnkr.co/edit/K0NW0g8UVRI1EsyRMIe6?p=preview

然而，有一种方法可以将Angular请求use relative path。

您可以使用./前缀文件名来使用相对网址：

import { Component } from '@angular/core';
@Component({
    selector: 'map',
    template: `<div class="container">
    Test
</div>`,
    styleUrls: ['./../app.component.scss'] // From location of map.component.ts
})
export class MapComponent {}

演示2：https://plnkr.co/edit/5x0qFBii2VIQOCtpxLfL?p=preview

注意：您必须以./开头，而不是直接../，否则Angular仍会使用绝对路径网址。

话虽如此，如果您在Meteor中使用该代码，您的所有文件将在编译期间捆绑在一起，并且您无法使用Angular方式懒惰地加载外部文件（无论是HTML还是样式表）。

因此，你应该写内联，或使用angular2-meteor导入推荐的方式，即：

import { Component } from '@angular/core';
import style from '../app.component.scss';
@Component({
    selector: 'map',
    template: `<div class="container">
    Test
</div>`,
    styles: [style]
})
export class MapComponent {}

加载第二个组件时，Meteor / Angular2应用程序冻结

1 个答案: