一 在index.html中，替换根组件选择器

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Angular4ReactiveForm</title>

  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

  <app-hero-list></app-hero-list>

</body>

</html>

二 在根模块的注解中，替换根组件

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

import { ReactiveFormsModule } from '@angular/forms';

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

import { HeroListComponent } from './hero-list/hero-list.component';

import { HeroDetailComponent } from './hero-detail/hero-detail.component';

@NgModule({

  declarations: [

    HeroListComponent,

    HeroDetailComponent

  ],

  imports: [

    BrowserModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [HeroListComponent]

})

export class AppModule { }

三 如果浏览器控制台没有报错 ( The selector "app-hero-list" did not match any elements )，并编译、运行，则替换成功。

Angular之替换根组件的更多相关文章

  1. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  2. Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程

    1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定 ...

  3. Dynamics CRM2011 导入解决方案报根组件插入错误的解决方法

    今天在还原一个老版本的解决方案,在导入时报根组件插入问题"Cannot add a Root Component 38974590-9322-e311-b365-00155d810a00 o ...

  4. Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置

    Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 这是上一篇对目录简单介绍: 关于编辑器,可以使用轻量级的 Sublime Text 3,我使用的是 HBuilder, 但 ...

  5. Angular各版本和组件下载

    Angular各版本和组件下载:https://code.angularjs.org/

  6. Vue父子组件传值之——访问根组件$root、$parent、$children和$refs

    Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...

  7. Vue子组件和根组件的关系

    代码: <script type="text/javascript"> const Foo = Vue.extend({ template: `<div id=& ...

  8. 关于Vue中根组件与组件树的理解

    在观看了b站的关于Vue3的教学视频后,对Vue的根组件与组件树进行简单的总结下 一.实例化Vue应用 // 此时,app就是一个Vue应用的实例,或者说是一个对象 const app = Vue.c ...

  9. Angular 学习笔记 (动态组件 & Material Overlay & Dialog 分析)

    更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-m ...

随机推荐

  1. STM32F105开发板

  2. js 监听组合键盘事件

    有些时候,我们需要在网页上,增加一些快捷按键,方便用户使用一些常用的操作,比如:保存,撤销,复制.粘贴等等. 我们所熟悉的按键有这么集中类型: 单独的按键操作,如:delete.up.down等 两位 ...

  3. day25-面向对象结构与成员

    1.面向对象结构分析 如下面的图所示:面向对象整体大致分两块区域: 每个大区域又可以分为多个小部分: class A: name = 'Tom' # 静态变量(静态字段) __iphone = '13 ...

  4. as3调用外部应用程序 as调用外部exe文件as3调用bat文件 未测试

    private function callTest(event: Event): void{callExe("d:/a.exe");callBat("d:/a.bat&q ...

  5. DotNet菜鸟入门之无限极分类（一）设计篇

    写这个教程的原因,是因为,无限极分类,在许多项目中,都用得到.而对于新手来说,不是很好理解,同时,操作上也有一些误区或者不当之处.所以我就斗胆,抛砖引玉一下,已一个常见的后台左侧频道树为例子,讲解一下 ...

  6. MOBA项目定点数的一个想法

    能不能这样: 写逻辑时全用整数,不用每用到一个浮点数就要转一下成浮点数. 主要是除法 题细节较多,待思考

  7. linux 3.10 gro的理解和改进

    gro,将同一个flow的一定时间范围之内的skb进行合并,减少协议栈的消耗,用于收包性能提升.gro网上的资料很多,但是都很少谈到gro的改进,刚好身边有个同事也想改这块的内容, 所以将最近看的gr ...

  8. 理解AppDomain和AppPool

    应用程序池: 这是微软的一个全新概念:应用程序池是将一个或多个应用程序链接到一个或多个工作进程集合的配置.因为应用程序池中的应用程序与其他应用程序被工作进程边界分隔,所以某个应用程序池中的应用程序不会 ...

  9. openwrt手动wifi设成client模式[笔记]

    说明:刚刷好的OPENWRT,默认是不带luci-web管理的,所以得手工SSH或TELNET上去改WIFI模式,以便通过WIFI连到现有的ROUTER去下载安装luci...: root@OpenW ...

  10. angularjs中安卓原生APP调用H5页面js函数，js写法应注意

    安卓原生app调用js方法,js方法应写在html下的script标签内,不能有任何function包裹,例如angular的controller层,这样APP也是获取不到的: 所以只有放在html中 ...