我的组件未显示在索引页面中
Posted
技术标签:
【中文标题】我的组件未显示在索引页面中【英文标题】：my component does not shown in index page 【发布时间】：2020-04-12 22:29:06 【问题描述】：我是初学者，我正在尝试用 Angular 创建一个简单的组件 但我有问题，我的组件没有显示在索引页面中 请帮帮我..
这是我的组件，名称为“List.Component.ts”：
import Component from '@angular/core';
@Component(
selector:'navBar',
templateUrl:'./navBarTemplate.html'
)
export class navBar
constructor()
这是我的模板 html 代码：
<ul>
<li>Test-1</li>
<li>Test-2</li>
<li>Test-3</li>
</ul>
我在“app.module.ts”文件中导入了我的组件：
import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import AppComponent from './app.component';
//here is my component
import navBar from './List.Component';
@NgModule(
imports: [ BrowserModule ],
declarations: [ AppComponent, navBar ],
bootstrap: [ AppComponent ]
)
export class AppModule
但 angular 只是在索引页面中显示“Hello Angular”。
我的索引页面：
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err) console.error(err); );
</script>
</head>
<body>
<NavBar></NavBar>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
【问题讨论】：
【参考方案1】：<body>
<NavBar></NavBar>
<my-app>Loading AppComponent content here ...</my-app>
</body>
您的整个应用程序都包含在my-app 中。它的外部不知道 <navBar> 是什么，除非 Web 组件在其他地方声明和编译。
简而言之，您需要将<navBar>（注意首字母小写）inside 任何组件 inside 您的 Angular 应用程序。例如，您可以将其放在 AppComponent 中，这可能是您想要的位置。
【讨论】：
很好的解释【参考方案2】：您需要添加
<NavBar></NavBar> 在 app.component.html
【讨论】：
【参考方案3】：在您的 index.html 文件中，删除导航栏选择器并在 app.component.html 文件中使用以下导航栏选择器
<navBar></navBar>
【讨论】：
【参考方案4】：只需在 app.component.html 中添加 <navBar></navBar>。
并在navbar下方添加<router-outlet></router-outlet>，以便查看其他组件。
app.component.html
<navBar></navBar>
<router-outlet></router-outlet>
【讨论】：
app.component.html 在我的项目中不存在 你应该把它放在你的入口组件中。不管是什么。一般 app.component.ts 是 Angular Project 的入口组件。【参考方案5】：要解决您的问题，您需要使用以下标签：
<navBar>
...
</navBar>
【讨论】：
以上是关于我的组件未显示在索引页面中的主要内容，如果未能解决你的问题，请参考以下文章