在 angular2 的模板中使用 templateUrl

debugcn 发表于 Dev

阳光明媚

我刚刚开始学习 Angular2 并停留在需要组合 2 个组件的地步。

这是我的 app.component.ts

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

    @Component({
     selector: 'app-root',
     template: './app.component.html <app-home></app-home>',
     styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      mylogo = 'ABC Engineering';
      headlist = ["Home", "About", "Portfolio", "Pricing", "Contact"];
      technology = ["HTML", "CSS", "JavaScript", "jQuery", "AngularJS",    "PHP"];
    }

这是我的 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

它给出如图所示的输出。

它没有显示 app.component.html 的输出！但它确实显示了来自“home.component.html”的内容。如何修复它以显示来自“app.component.html”的内容？

贡特·佐赫鲍尔（GünterZöchbauer）

您可以使用

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

或者

   @Component({
     selector: 'app-root',
     template: '<app-home></app-home>',
     styleUrls: ['./app.component.css']
    })

但不能在单个组件中组合或混合两者。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-8

我来说两句

0条评论

登录后参与评论

来自分类Dev

Angular2：模板工作，但templateUrl不工作

来自分类Dev

Angular 2“模板”与“ templateUrl”问题

来自分类Dev

Angular2 + Webpack如何使用templateUrl输出html文件？

来自分类Dev

使用templateUrl时Angular2测试错误

来自分类Dev

Angular2。我已经从templateUrl中删除了渲染模板

来自分类Dev

使用templateUrl时出现Angular 2错误

来自分类Dev

使用templateUrl时出现Angular 2错误

来自分类Dev

使用业力和Jasmin在Angular2单元测试中未加载TemplateUrl

来自分类Dev

在Angular2 + Webpack中为templateUrl使用相对路径

来自分类Dev

Angular2 Web与Mobile TemplateURL

来自分类Dev

在Angular指令的外部模板（templateURL）上使用$ compile

来自分类Dev

express+angular，如何使用templateURL

来自分类Dev

如何在Angular2中使用<html>模板？

来自分类Dev

如何在Angular2中使用<html>模板？

来自分类Dev

Angular2 templateUrl和styleUrls的相对路径？

来自分类Dev

我可以动态更改angular2中的templateUrl吗？

来自分类Dev

Angular 指令中的外部模板 (templateURL) 不起作用

来自分类Dev

angularjs在templateUrl中使用变量

来自分类Dev

在templateUrl函数中使用$ rootScope

来自分类Dev

AngularJS中的templateUrl与模板

来自分类Dev

Angular 2稳定：templateUrl变量

来自分类Dev

我如何在templateURL中使用Angular JS使用Laravel局部视图

来自分类Dev

Angular无法找到templateUrl

来自分类Dev

Angular 1.5+组件-在templateUrl函数内部使用绑定

来自分类Dev

如何从远程服务器使用templateUrl？角度2

来自分类Dev

在指令中使用promise用于动态templateUrl

来自分类Dev

如何注入$ httpParamSerializer以在templateUrl中使用

来自分类Dev

在angularjs和templateUrl中使用指令

来自分类Dev

在模板语句中使用async / await时，防止Angular2渲染组件

Related 相关文章

文章