Question

我使用@angular/cli创建了一个新的角度应用。该应用模板中已有app component。在该应用组件中，我想使用另一个名为component的{{1}}。所以在user内部有@Component名为property，有些人说只使用templateUrl。我应该使用哪一个，哪个是最好的。目前我正在尝试使用template。

认为这是我的templateUrl

app.component.ts

这是我的@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })

user.component.ts

所以如何将@Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] })组件与user一起使用。我尝试过app component，但它没有工作，并且relative paths也没有工作。我很困惑。希望你的帮助。

Answer 1

在selector文件中命名user.component.ts，并在template文件的app.component.ts中使用它。然后你可以使用这两个组件。

user.component.ts

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html', 
})

app.component.ts

@Component({
  selector: 'app-root',
  template:`<app-user></app-user>`,
})

如果您手动创建文件，请记得在UserComponent declarations个文件中添加app.module.ts。

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],

Answer 2

将我的用户组件与app组件一起使用。如果您想将用户组件与app组件一起使用，那么

在app模板中添加用户组件所以你的app.template。 HTML将包含 <app-user></app-user>
在app.module

@NgModule（{ ... 声明：[AppComponent，UserComponent] ... }）

您可以详细了解多个组件here

Answer 3

与template url无关，只需使用我app component内的选择器，如下所示。

在我的app.component.html内，我们应该使用下面的user组件selector名称。

<div class="row">
    <app-user></app-user>
</div>

这将显示user component

中的app component内容

如何在角度2中设置模板URL

3 个答案: