"ng-bootstrap"和"ngx-bootstrap"有什么区别？它们是否相互关联？或者它们只是并发实现？
有人和他们一起工作,可以给出/解释两者的利弊吗？
使用"ng-bootstrap"我的意思是https://ng-bootstrap.github.io/#/home和
与"ngx-bootstrap"我的意思是http://valor-software.com/ngx-bootstrap/.
两者都与Angular 4(不是AngularJS!)和Bootstrap 4有关.
请注意,这不是ngx-bootstrap和ng2 bootstrap之间重复的问题？.
使用ng --version我得到:
@ angular/cli:1.0.0
这不是最新版本.
由于我的系统上全局安装了Angular CLI,为了升级它,我尝试了:
npm update angular-cli -g
但它不起作用,因为它保持1.0.0版本.
你如何在Angular2中检测到onBlur事件？我想用它
<input type="text">
任何人都可以帮我理解如何使用它吗？
我正在使用angular.io网站上的5分钟快速入门,其中包含如下文件结构:
angular2-quickstart
app
app.component.ts
boot.ts
index.html
license.md
package.json
tsconfig.json
tsconfig.json是这样的代码块:
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
还有package.json:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10" …我的应用程序有一个NameService,其中包含名称.
App,Navbar和TheContent有两个子组件引用此服务.只要服务中的名称发生变化,我希望它在两个其他组件中更新.我怎样才能做到这一点？
import {Component, Injectable} from 'angular2/core'
// Name Service
@Injectable()
class NameService {
name: any;
constructor() {
this.name = "Jack";
}
change(){
this.name = "Jane";
}
}
// The navbar
@Component({
selector: 'navbar',
template: '<div>This is the navbar, user name is {{name}}.</div>'
})
export class Navbar {
name: any;
constructor(nameService: NameService) {
this.name = nameService.name;
}
}
// The content area
@Component({
selector: 'thecontent',
template: '<div>This is the content area. Hello user {{name}}. <button (click)=changeMyName()>Change the name</button></div>'
})
export …我有一个简单的方法,在它的最后我想重定向到另一个组件:
export class AddDisplay{
display: any;
addPairTo(name: string, pairTo: string){
this.display = {};
this.display.name = name;
this.display.pairTo = pairTo;
}
}
我想做的是在方法结束时重定向到另一个组件:
export class AddDisplay{
display: any;
addPairTo(name: string, pairTo: string){
this.display = {};
this.display.name = name;
this.display.pairTo = pairTo;
this.redirectTo('foo');
}
}
我如何在Angular 2中实现这一目标？
我试图根据http://angular.io上的快速入门设置角度2 .我完全按照指南中的描述复制了每个文件,但是当我运行npm start并打开浏览器选项卡时,我在控制台中收到以下错误的"正在加载...":
Uncaught SyntaxError: Unexpected token < (program):1
__exec @ system.src.js:1374
Uncaught SyntaxError: Unexpected token < angular2-polyfills.js:138
Evaluating http://localhost:3000/app/boot
Error loading http://localhost:3000/app/boot
这是我的app.component.ts:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>`
})
export class AppComponent {
}
我的boot.ts:
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
我的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular 2 Quick Start</title>
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script …如何在Angular 2路由器中监听状态变化？
在Angular 1.x中我使用了这个事件:
$rootScope.$on('$stateChangeStart',
function(event,toState,toParams,fromState,fromParams, options){ ... })
所以,如果我在Angular 2中使用这个eventlistener:
window.addEventListener("hashchange", () => {return console.log('ok')}, false);
它不是返回'ok',然后从JS更改状态,然后才运行浏览器history.back()函数.
使用router.subscribe()函数作为服务:
import {Injectable} from 'angular2/core';
import {Router} from 'angular2/router';
@Injectable()
export class SubscribeService {
constructor (private _router: Router) {
this._router.subscribe(val => {
console.info(val, '<-- subscribe func');
})
}
}
在路由中初始化的组件中注入服务:
import {Component} from 'angular2/core';
import {Router} from 'angular2/router';
@Component({
selector: 'main',
templateUrl: '../templates/main.html',
providers: [SubscribeService]
})
export class MainComponent {
constructor (private subscribeService: SubscribeService) {}
}
我将此服务注入其他组件,例如本例中.然后我改变状态,console.info()在服务中不起作用.
我做错了什么？
由于其双向数据绑定功能,Angular one或多或少遵循MVV*设计原则.
Angular2正在采用基于组件的UI,这是React开发人员可能熟悉的概念.从某种意义上说,Angular 1.x控制器和指令模糊了新的Angular 2 Component.
这意味着在Angular 2中没有控制器也没有指令.相反,组件有一个选择器,它对应于组件将表示的html标签,而@View则指定要填充的组件的HTML模板.
Angular2仍然实现双向数据绑定,但不包含模型,例如,如果我有一个@Component显示文章列表和一个class定义文章对象的模型:
class Article {
title: string;
link: string;
votes: number;
constructor(title: string, link: string, votes?: number){
this.title = title;
this.link = link;
this.votes = votes || 0;
}
这在MVC模式中将被视为模型.
那么考虑到这个Angular最接近的设计模式呢？
我想在使用Angular CLI创建的Angular(4+)项目中使用Bootstrap 4和SASS.
特别是我需要:
ng serve脚本时,添加监视和自动重新编译angular ×10
javascript ×6
angular-cli ×2
bootstrap-4 ×1
json ×1
mvvm ×1
ng-bootstrap ×1
onblur ×1
sass ×1
typescript ×1