Question

我做了一个小应用程序，但它全部在app.component.ts中。现在我正在尝试将其分解为单独的组件和服务。作为第一步，我尝试将代码拆分为单独的组件但是我无法设置templateUrl和styleUrls。我得到的代码和错误如下所示。这是我的app.module.ts

<button>Button Text Could Be Editable</button><br />
<button onclick="this.previousElementSibling.previousElementSibling.contentEditable = !!(+(this.dataset.edit = this.dataset.edit == 0 ? 1 : 0))" data-edit="0">Edit Button Above</button>

app.routing.ts文件

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { AppComponent } from "./app.component";
import { routes, navigatableComponents } from './app.routing';
import { SearchComponent } from './search-component/search.component';

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
  ],
  declarations: [AppComponent, SearchComponent],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule { }

app.component.ts

import { SearchComponent } from './search-component/search.component';

export const routes = [
  { path: "", component: SearchComponent }
  ];

export const navigatableComponents = [
  SearchComponent
  ];

search.component.ts

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

@Component({
  selector: "my-app",
  template: `
  <ActionBar title="Glossary" class="action-bar"></ActionBar>
  <page-router-outlet></page-router-outlet>`,
  styleUrls: ["app.component.css"]
})
export class AppComponent {

}

现在它正常工作，但是当我将我的HTML和CSS分成如下所示的单独文件时。它给出了错误。

import { Component } from "@angular/core"; @Component({ selector: "my-app", template: `<Label text="search Here" class="small-spacing"></Label>` }) export class SearchComponent { constructor(){ } }我也尝试这种方式。

templateUrl: "search.component/search.component.html",

控制台显示了这一点。

templateUrl: "search.component.html",

GitHub存储库this

Answer 1

再添加一个moduleId属性：

如果我们决定使用CommonJS格式，我们使用标准模块加载器，   然后我们可以使用包含绝对URL的module.id变量   组件类[实际加载模块文件时]：   确切的语法是moduleId: module.id。

此moduleId值由。使用   角度反射过程和metadata_resolver组件   在组件之前评估完全限定的组件路径   构造

<强> CommonJS的

@Component({
    moduleId: module.id
    selector: "my-app",
    templateUrl: './reative/path'
})
export class SearchComponent {
  constructor(){
  }
}

并在root（例如root模块）中声明此对象

declare var module: {
    id: string;
};

以及此帖子中的更多配置：https://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

顺便说一句，你可以使用webpack for bundle，或Angular CLI用于脚手架app。

如何设置templateUrl和styleUrls

1 个答案: