一 在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. Activity服务类-9 TaskService服务类

    一共72个接口 1.创建任务(2个方法)//创建与任何流程实例无关的新任务.Task newTask();//使用用户定义的任务id创建一个新任务.Task newTask(String taskId ...

  2. 反射机制（java）

    反射机制 反射机制可通过在运行时加载类名而获取类,并对其进行操作.工厂模式,动态代理中较常用到. 在实际场景中:由于有好多类具有共同的接口样式,而他们又用的不是很频繁,如果在服务器中保有这些类会占用资 ...

  3. iOS 申请distribution证书, 公钥，私钥

    私钥只有在本机生成CSR文件的时候会产生,公钥会在CSR文件传给apple时,apple产生.

  4. android 环境变量

    1.新建一个环境变量和系统变量名称为ANDROID_HOME,变量值为当前安装SDK的目录 2.把%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools添 ...

  5. leetcode AC1 感受

    在网上第一个AC还是蛮高兴的,之前试了不少练习编程的方法,感觉不怎么适合自己,在OJ上做题的确是一个能够锻炼的方法. 之前一直研究学习的方法,往简单的说是认知.练习,往复杂的说是,保持足够input, ...

  6. 遍历DOM树，each()遍历

    在<jQuery教程/理解选取更新范围>一节中,我们知道:当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. 然后有的时候需要遍历元素,怎么办? 使用each( ...

  7. C# 模拟多文件上传

    原地址:http://www.cnblogs.com/greenerycn/archive/2010/05/15/csharp_http_post.html 1.客户端代码 用winform写的 pr ...

  8. Oracle 监听器日志解析

    Oracle监听器是驻留在Oracle实例所在服务器上的独立进程.作为客户端进程连接实例的重要沟通组件,Oracle监听器扮演着重要的地位.本篇将从监听器日志入手,分析阅读监听器日志和日常监听器常见行 ...

  9. yii添加模型基础类

  10. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...