Angular2 app.component从页面中删除所有内容

Question

I've been working on an .net core app and I'm trying to now add angular2 to the project and I'm a bit confused as to why the app.component template appears to remove everything from the page even though when inspecting the page, the original content is indeed there. 我一直在开发.net核心应用程序，现在尝试将angular2添加到项目中，我对为什么app.component模板似乎从页面中删除所有内容感到困惑，即使检查了页面上，原始内容确实存在。 My understanding was that the app.component provided an entry point in the same way that the following does in angular1: 我的理解是，app.component提供了一个入口点，就像以下在angular1中一样：

var app = angular.module('myApp', []);

<html ng-app="app">....</html>

Is there anyway I can use angular2 without having to abandon my razor views, or am I going to have to bootstrap every view? 无论如何，我可以使用angular2而不用放弃剃刀视图，还是我必须重新引导每个视图？

Answer 1

In angular 2 you need to have one Root component which will be used for bootstrapping and will be rendered in index.html. 在angular 2中，您需要有一个Root组件，该组件将用于引导并在index.html中呈现。 Al other components, services needs to be imported and declared in modules.ts Ex: Sample app below has three components: Parent, App and New App. 其他组件，服务也需要导入并在modules.ts中声明。示例：下面的示例应用程序具有三个组件：Parent，App和New App。 In modules.ts file you need to import all the components and declare inside NgModules. 在modules.ts文件中，您需要导入所有组件并在NgModules中声明。 Below that it is bootstrapping Parent component. 在其下方是引导父组件。

Modules.ts Modules.ts

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

import { ParentComponent } from './parent.component';
import { AppComponent } from './app.component';
import { NewAppComponent } from './newapp.component';

@NgModule({
declarations: [
ParentComponent, AppComponent, NewAppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
  { path: 'app', component: AppComponent },
  { path: 'newapp', component: NewAppComponent }
],{ useHash: true })
],
 providers: [],
 bootstrap: [ParentComponent]
})
export class AppModule { }

Parent.Component.ts Parent.Component.ts

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

@Component({
  selector: 'parent-root',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
}

Parent.Component.Html Parent.Component.Html

<h1>Test</h1>  
<ul>
    <li><a href="/index.html#/app">App</a></li>
    <li><a href="/index.html#/newapp">New App</a></li>
    </ul>
   <router-outlet></router-outlet>

Index.html Index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Routingapp</title>
  <base href="/index.html">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <parent-root>Loading...</parent-root>
</body>
</html>

Parent component is just used to bootstrap the application (It can be considered as the Home page of you application). 父组件仅用于引导应用程序（可以将其视为应用程序的主页）。 There is no need to bootstrap every view/component. 无需引导每个视图/组件。

Angular2 app.component从页面中删除所有内容

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-26 20:56:23

Angular2 app.component从页面中删除所有内容

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-26 20:56:23

解决方案1
1 已采纳 2016-10-26 20:56:23