Angular 4.X开发实践中的踩坑小结

本文主要给大家分享了关于Angular 4.X开发中与到的一些踩坑经验，分享出来供大家参考学习，下面来一起看看详细的介绍：

一、使用ngIf或者ngSwitch出错

在html文件中使用ngIf或者ngSwitch时，会解析出错，错误提示如下：

Error: Template parse errors:
Can't bind to 'ngSwitch' since it isn't a known property of 'div'.

这个是因为没有在此Component所在的Module中导入CommonModule，虽然你可能在AppModule中导入过了，但是还是需要导入一次，代码如下：

import { CommonModule } from '@angular/common';
@NgModule(
 {
  declarations: [ ],
  imports: [
   CommonModule
  ],
  exports: [ ],
  providers: [ ]
 }
)
export class MainModule { }

二、多级依赖注入器

Angular 4.X拥有多级依赖注入系统，在一个注入器的范围内，依赖都是单例的。它使用冒泡机制，当一个组件申请获得一个依赖时，Angular 先尝试用该组件自己的注入器来满足它。 如果该组件的注入器没有找到对应的提供商，它就把这个申请转给它父组件的注入器来处理。 如果那个注入器也无法满足这个申请，它就继续转给它的父组件的注入器。

举个例子，从登录页点击登录按钮进入主页，LoginComponent和MainComponent都注入了LoginService。

登录：

//login.service.ts
// 这个是登录服务
import { Injectable } from '@angular/core';

@Injectable()
export class LoginService {
 isLoggedIn: boolean = false;
 login(){
  this.isLoggedIn=true;
 }
}
// login.component.ts
//登录界面，只有一个登录按钮，点击后登录会把LoginService中的isLoggedIn变为true

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoginService } from '../login/login.service';
@Component({
 selector: 'app-login',
 template:`<button (click)=login()>Login</button>`,
 providers: [LoginService]
})
export class LoginComponent implements OnInit {

 constructor(private router: Router, private loginService: LoginService) { }

 login() {
 this.loginService.login();
 console.log(this.loginService.isLoggedIn); //结果为true
 this.router.navigate(['/main']);
 }
}
// main.component.ts
// 这个是登陆后的主界面

import { Component} from '@angular/core';
import { LoginService } from '../login/login.service';

@Component({
 selector: 'app-main',
 template: `<h1>HOME</h1>`,
 providers: [LoginService]
})
export class MainComponent implements OnInit {

 private userType: string ;
 constructor(private loginService: LoginService) {
 console.log(this.loginService.isLoginIn); //结果为false
 }
}

从上面的例子可以看出来，在不同的地方注入同样的Service，但是会使用不同的实例，所以会导致结果可能不同，需要注意。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Angular 4.x 动态创建表单实例

    Angular 4.x 动态创建表单实例

    本文将介绍如何动态创建表单组件,我们最终实现的效果如下: 在阅读本文之前,请确保你已经掌握 Angular 响应式表单和动态创建组件的相关知识,如果对相关知识还不了解,推荐先阅读一下 Angular 4.x Reactive Forms和 Angular 4.x 动态创建组件 这两篇文章.对于已掌握的读者,我们直接进入主题. 创建动态表单 创建 DynamicFormModule 在当前目录先创建 dynamic-form 目录,然后在该目录下创建 dynamic-form.module.ts

  • Web前端框架Angular4.0.0 正式版发布

    前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重

  • Angular2平滑升级到Angular4的步骤详解

    前言 Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. Angular4现已发布  http://www.jb51.net/article/109685.htm 为什么跳过Angular 3? 根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch

  • Angular4 中常用的指令入门总结

    前言 本文主要给大家介绍了关于Angular4 常用指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: NgIf <div *ngIf="false"></div> <!-- never displayed --> <div *ngIf="a > b"></div> <!-- displayed if a is more than b --> <div *ngIf=&

  • Angular 4 指令快速入门教程

    Angular 4 指令快速入门教程

    本系列教程的开发环境及开发语言: Angular 4 + Angular CLI TypeScript 基础知识 Angular CLI 基本使用 安装 Angular CLI (可选) npm install -g @angular/cli 创建新的项目 ng new PROJECT-NAME 启动本地服务器 cd PROJECT-NAME ng serve Angular 指令简介 Angular 的指令分为三种: 组件(Component directive):用于构建UI组件,继承于

  • Angular 4.x 路由快速入门学习

    路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据.这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面. 接下来我们将按照以下目录的内容,介绍 Angular 的路由.具体目录如下: 目录 Installing the router Base href Using the router RouterModule.forRoot RouterModule.forChild Configuring a route Displaying r

  • 详解Angular 4.x 动态创建组件

    动态创建组件 这篇文章我们将介绍在 Angular 中如何动态创建组件. 定义 AlertComponent 组件 首先,我们需要定义一个组件. exe-alert.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: "exe-alert", template: ` <h1>Alert {{type}}</h1> `, }) export cl

  • 详解Angular 4 表单快速入门

    基础知识 Angular CLI 基本使用 安装 Angular CLI (可选) npm install -g @angular/cli 创建新的项目 ng new PROJECT-NAME 启动本地服务器 cd PROJECT-NAME ng serve Angular Forms 简介 Angular 4 中有两种表单: Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) Reactive Forms - 响应式表单 本文主要

  • Angular 4.X开发实践中的踩坑小结

    本文主要给大家分享了关于Angular 4.X开发中与到的一些踩坑经验,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.使用ngIf或者ngSwitch出错 在html文件中使用ngIf或者ngSwitch时,会解析出错,错误提示如下: Error: Template parse errors: Can't bind to 'ngSwitch' since it isn't a known property of 'div'. 这个是因为没有在此Component所在的Module中导入

  • Echarts在Taro微信小程序开发中的踩坑记录

    Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

  • SpringCloud整合Activiti过程中的踩坑记录

    SpringCloud整合Activiti过程中的踩坑记录

    目录 前言 错误一:shiro与serurity冲突 处理:在启动类屏蔽SpringSecurity 处理:更换版本7.1.0.M4及以下 错误二:与mybatis冲突 处理:注释包中的MyBatis 关于idea插件 总结 前言 最近需要用到工作流,选择了Activiti,刚开始配置起来并没有很顺利.记录一下希望对读者们有帮助. 先来看我这边项目的环境:主要为JDK1.8,SpringbBoot2.3.5,MyBatis-Plus3.3.2, MySql8.0.21,Shiro1.5.3,id

  • webpack@v4升级踩坑(小结)

    之前看到各大公众号都在狂推 webpack 新版发布的相关内容,之前就尝试了升级,由于部分插件的原因,未能成功,现在想必过了这么久已经可以了,今天就来试一下在我的项目中升级会遇到哪些坑. 查阅更新日志 在安装更新之前,先大致浏览了一下更新日志,对大部分用户来说迁移上需要注意的应该就是这些点: 在命令行界面运行打包指令需要安装 webpack-cli : 打包需要指定打包模式 production or development ,在不同模式下会添加不同的默认配置, webpack.DefinePl

  • H5混合开发IOS中遇到的坑

    以下是小编通过整理后得到的在H5混合开发的IOS项目中经常遇到的坑: 1. ios系统手机无法自动播放BGM 这个是苹果系统限制,默认不允许自动播放音频,往往需要点一下触发play()事件才能播放. 那么我们在页面onload后触发播放事件: document.getElementById('music').play(); 到这里一般都可以播放音乐了,如果还不行,很有可能是微信的限制.这时需要调用微信接口. 页面先引入: <script src="http://res.wx.qq.com/

  • Weex开发之WEEX-EROS开发踩坑(小结)

    随着Weex跨平台技术的持续火热,一时间涌现出了一大批基于Weex的开源解决方案,Weex Eros就是这么一个面向前端Vue的开源APP解决方案. 目前,如果直接使用Weex框架开发应用会存在很多痛点,诸如初始化启动的环境问题.项目工程化问题.版本升级与版本兼容问题和不支持增量更新等,而Weex Eros等开源解决方案能对上述问题进行有效的解决. Weex Eros的定位不是组件库,而是基于Weex封装的面向前端Vue的一整套APP开源解决方案,它关心的是整个APP项目.在Weex的强大支持下

  • webpack 1.x升级过程中的踩坑总结大全

    webpack 1.x升级过程中的踩坑总结大全

    前言 大家应该都知道,Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.因为最近在对博客做SSR,无奈vue ssr demo或例子都是基于webpack2的.博主在webpack1.x上折腾了许久,vue-ssr-server-bundle.json文件生成仍然还是遥遥无期.最后还是乖乖地开始了webpack升级之旅. 本文主要记录升级过程中遇到的一些坑和解决办法,可能有些遗漏了,能记多少记多少吧.话不多说了,来一

  • go json转换实践中遇到的坑

    在使用 go 语言开发过程中,经常需要使用到 json 包来进行 json 和 struct 的互相转换,在使用过程中,遇到了一些需要额外注意的地方,记录如下. 整数变浮点数问题 假设有一个 Person 结构,其中包含 Age int64 和 Weight float64 两个字段,现在通过 json 包将 Person 结构转为 map[string]interface{},代码如下. type Person struct { Name string Age int64 Weight flo

  • VuePress 快速踩坑小结

    VuePress 快速踩坑小结

    最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化.另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大,本文将围绕搭建一个 Github 的静态博客展开. 为项目加入 VuePress 第一步为您的项目安装 VuePress,如果您的项目代码中并没有 package.json文件,请先执行 npm

  • iOS13 适配和Xcode11.0踩坑小结

    iOS13中presentViewController的问题 更新了Xcode11.0 beta之后,在iOS13中运行代码发现presentViewController和之前弹出的样式不一样. 会出现这种情况是主要是因为我们之前对UIViewController里面的一个属性,即modalPresentationStyle(该属性是控制器在模态视图时将要使用的样式)没有设置需要的类型.在iOS13中modalPresentationStyle的默认改为UIModalPresentationAu

随机推荐