blog-angular
blog-angular copied to clipboard
deepthan
Angular 笔记
# 集成echart ``` npm install echarts ``` 在你的组件 > ts ``` import { Component, AfterViewInit, ViewChild, ElementRef, } from "@angular/core"; import * as echarts from "echarts"; chartInstance: any; @ViewChild("chart", {...
# 国际化集成ngx-translate 用什么做i18n？ ``` https://stackoverflow.com/questions/51087137/angular-6-i18n-vs-ngx-translate ``` 目前有三种方式 - [ngx-translate](https://github.com/ngx-translate/core) - Angular i18n：[英文](https://angular.io/guide/i18n) / [中文](https://www.angular.cn/guide/i18n) - [angular-l10n](https://github.com/robisim74/angular-l10n) #### 使用`ngx-translate`做法 - 首先在`app.module`中引入此插件的`module` ``` import { HttpClient } from '@angular/common/http'; import { TranslateModule,...
# 富文本编辑器 tinymce使用方法和踩坑指南 ## 使用方法 * [官网](https://www.tiny.cloud/) * [quick start guide](https://www.tiny.cloud/docs/integrations/angular/) * [文档](https://www.tiny.cloud/docs/) #### 隐藏头部菜单 > [ref](http://landcareweb.com/questions/38766/tinymceyin-cang-lan) ``` tinymce.init({ menubar: false, statusbar: false, toolbar: false }); ``` #### 只读状态 只读状态需要隐藏头部菜单...
- 用处：一个Angular调试和可视化工具 - 进入网站下载： https://augury.angular.io/ - 进入chorme网上商店下载 ``` https://chrome.google.com/webstore/category/extensions?utm_source=chrome-ntp-icon ``` 搜索augury 添加名字为augury的插件。
# tsconfig.json添加绝对路径 tsconfig.json ``` baseUrl": "./", "@env": ["src/environments"], "@env/*": ["src/environments/*"] ``` 或者 ``` baseUrl": ".", "@env": ["src/environments"], "@env/*": ["src/environments/*"] ``` 或者 ``` "baseUrl": "./src", "paths": { "@env": ["environments"], "@env/*": ["environments/*"]...
# Angular 安全管道使用方法 #### 管道写法 ``` import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl } from '@angular/platform-browser'; @Pipe({ name: 'safe', }) export class...
#### 带有属性选择器的组件 子组件选择器写成属性选择器即可，传值和普通传值一致。 > 父组件 ``` import {Component } from '@angular/core'; @Component({ selector: 'app', template: ` ` }) export class AppComponent { animals = [ '猫', '狗' ]; } ```...
## 设置表单值 FormControl setValue 设置该表单控件的新值。 ``` setValue(value: any, options: { onlySelf?: boolean; emitEvent?: boolean; emitModelToViewChange?: boolean; emitViewToModelChange?: boolean; } = {} ): void ``` object 当值发生变化时，该配置项决定如何传播变更以及发出事件。 该配置项会传递给 updateValueAndValidity 方法。 -...
#### 方法1： 直接设置为false ``` export class AppComponent { form: FormGroup; ngOnInit() { this.form = new FormGroup({ input: new FormControl(false), }); } } ``` #### 方法2: 设置disabled 为 false ``` export...
#### 带有属性选择器的组件 子组件选择器写成属性选择器即可，传值和普通传值一致。 > 父组件 ``` import {Component } from '@angular/core'; @Component({ selector: 'app', template: ` ` }) export class AppComponent { animals = [ '猫', '狗' ]; } ```...