简体   繁体   English

角度内容不显示

[英]Angular Content Not Showing Up

So I have created a new component, imported it and declared into AppModule, and used the appropriate selector name for the tags.因此,我创建了一个新组件,将其导入并声明到 AppModule 中,并为标签使用了适当的选择器名称。 But somehow the content is not showing up, what is wrong?但不知何故内容没有显示,有什么问题?

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HelloComponent } from "./hello/hello.component";

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    HelloComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

}

https://plnkr.co/edit/JfBoe38MZqRlvTLB?preview https://plnkr.co/edit/JfBoe38MZqRlvTLB?preview

Error in console GET https://run.plnkr.co/preview/ckgj32p39001k3a6cujj3nr87/app.component.html 404控制台错误 GET https://run.plnkr.co/preview/ckgj32p39001k3a6cujj3nr87/app.component.html 404

Unhandled Promise rejection: Failed to load app.component.html ;未处理的承诺拒绝:无法加载 app.component.html ; Zone: ;区域: ; Task: Promise.then ;任务: Promise.then ; Value: Failed to load app.component.html zone.js@0.6.25?main=browser:357值:无法加载 app.component.html zone.js@0.6.25?main=browser:357

Error: Uncaught (in promise): Failed to load app.component.html错误:未捕获(承诺):无法加载 app.component.html

I am not able to debug on plunker so I tried on stackblitz.我无法在 plunker 上进行调试,所以我尝试了 stackblitz。

I created a simple hello component inside hello folder on root.我在根目录的 hello 文件夹中创建了一个简单的 hello 组件。

hello/hello.component.ts你好/hello.component.ts

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

@Component({
  selector: "app-hello",
  templateUrl: "./hello.component.html",
  styleUrls: ["./hello.component.css"]
})
export class HelloComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

added this in app.module.ts在 app.module.ts 中添加了这个

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

import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello/hello.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

then added hello component in app.component.html然后在 app.component.html 中添加 hello 组件

<p>
  Start editing to see some magic happen :)
</p>
<app-hello></app-hello>

and it is working fine.它工作正常。 you can check working demo here你可以这里查看工作演示

Preview -预览 - 在此处输入图片说明

Let me know if you have any doubt.如果您有任何疑问,请告诉我。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM