如何在角度2中设置模板网址

Question

我使用 @angular/cli 创建了一个新的 Angular 应用程序。在那个应用程序模板中已经有app component。在该应用程序组件中，我想使用另一个名为user 的component。所以在@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，但它没有用，给absolute path也没有用。我糊涂了。希望您对此有所帮助。

Answer 1

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

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

• 在 app.module 中添加用户组件

@NgModule({ ... 声明：[AppComponent, UserComponent] ... })

您可以了解更多关于多个组件here

Answer 2

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

在我的app.component.html 中，我们应该使用user 组件selector 名称，如下所示。

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

这将显示app component 中的user component 内容

Answer 3

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

user.component.ts

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

app.component.ts

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

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

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