我有一个简单的Angular 2组件@Input,我绑定到模板.模板显示输入数据,但我无法从构造函数访问它:
import {Component, View, bootstrap, Input} from 'angular2/angular2';
import DataService from './data-service';
@Component({
selector: 'app-cmp'
})
@View({
template: `{{data.firstName}} {{data.lastName}}` //-> shows the correct 'data'
})
export default class NamesComponent {
@Input() data: any;
constructor(dataService: DataService) {
console.log(this.data);//undefined
}
}
Run Code Online (Sandbox Code Playgroud)
这是一个带有示例的plunker(参见"names-component.ts").
我究竟做错了什么?
我正在构建一个Angular 2.0组件,我想动态地控制它的样式(使用ng-style).在快速查看Angular 2的文档后,我尝试了这个:
<div class="theme-preview" ng-style="{'font-size': fontSize}">
{{fontSize}}
</div>
Run Code Online (Sandbox Code Playgroud)
并且看到尺寸实际上印在div内但没有影响风格.fontSize是组件的属性绑定之一',这意味着组件从它的父节点获取它,如下所示:
<my-component [font-size]="size" />
Run Code Online (Sandbox Code Playgroud)
在组件内部,我有:
@Component({
selector: 'XXX',
properties: ['fontSize']
})
Run Code Online (Sandbox Code Playgroud)
我在这里错过了什么吗?
我正在使用iPhone模拟器运行UIWebview和Safari浏览器(在我的Mac上)以调试js/html/css代码(通过"开发"菜单 - > iPhone模拟器 - >选择我的webview).
Yestarday,iPhone模拟器选项从我的"开发"菜单中消失了:(正如你所看到的,这里缺少"iphone-simulator"(它在后台打开并正常工作......)

任何的想法?
编辑:我正在使用iOS 7 iPhone模拟器+ Safari 7
编辑2:刚尝试在iphone-simulator的Safari浏览器上打开一个网站(除了UIWebview).这里没有运气......
我正在使用升级适配器逐步升级我的应用程序.我的应用程序使用ui-router(+有子路由).
我在Angular 2中阅读了这篇关于路由的好文章.我的问题是:
是否可以在Angular 1.X app +升级适配器中使用新路由器?
例如:
我有一个角度1.X模板<div ui-view=""></div>.当我将它升级为Angular 2.0组件时,我必须使用新的组件路由器,因为Angular 2.0现在正在渲染这个组件.但是,为了使用它,我应该这样做:
bootstrap(App, [provide(LocationStrategy, { useClass: PathLocationStrategy })])
Run Code Online (Sandbox Code Playgroud)
使用Upgrade Adater引导时我没有这个!
我应该首先将引导程序移动到Angular 2,然后再移动到Component路由器吗?
谢谢
我有一个Angular2.0组件:
import {Component, View, FORM_DIRECTIVES} from 'angular2/angular2';
@Component({
selector: 'font-size-component',
properties: ['fontSize'],
events: ['fontSizeChanged']
})
@View({
template: `<input id="fontSize" [(ng-model)]="fontSize"/>`,
directives: [FORM_DIRECTIVES]
})
export class FontSizeComponent {
constructor() {
}
}
Run Code Online (Sandbox Code Playgroud)
现在,我希望此组件在输入更改时触发事件(使用事件绑定).
在Angular 1.XI上有几个选项(ng-change或$scope.$wacth).我正在寻找类似的解决方案,所以当输入更改时,我将能够使用eventemitter并触发fontSizeChanged事件.
谢谢,
的Yaniv
我正在使用React与Webpack和Babel.我收到运行时错误:
未捕获的ReferenceError:未定义ReactDom
我的反应版本是:
"devDependencies": {
"phantomjs-polyfill": "0.0.2",
"react-addons-test-utils": "^0.14.8"
},
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
},
Run Code Online (Sandbox Code Playgroud)
我的代码是:
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './components/main';
ReactDom.render(<Main />, document.getElementById('root'));
Run Code Online (Sandbox Code Playgroud)
我究竟做错了什么?
评论 - 我设法解决了这个问题,请参阅本文的底部
我正在使用UpgradeAdapter(ngUpgrade)升级我的Angular 1.X应用程序.我添加了一个新的Angular 2.0服务,我从我的Angular 2.0组件中调用它:
服务:
import {Inject} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
export default class MyService {
_http;
constructor(http: Http) {
this._http = http; //http is undefined here
}
getData(): Observable<any> {
return this._http.get(someUrl);
}
}
Run Code Online (Sandbox Code Playgroud)
在我的内心我bootstrap.ts:
declare var angular: any;
import {UpgradeAdapter} from 'angular2/upgrade';
import {Http} from 'angular2/http';
let adapter = new UpgradeAdapter();
adapter.addProvider(Http);
//.....
adapter.bootstrap(document.body, ['myApp']);
Run Code Online (Sandbox Code Playgroud)
我在这做错了什么?
编辑:
我正在向Angular 2.0服务注入另一项服务(Angular 1.X升级服务),它确实有效:
import {Inject} from 'angular2/core';
import {Http} …Run Code Online (Sandbox Code Playgroud) 我正在使用Android Webview播放html5视频,包括Youtube视频(我自己的标签和Youtube嵌入式iFrame).在以下情况下,我遇到了Samsung Galaxy S4的问题:
我在具有两种Webview的测试环境中尝试了这一点:"常规"Android Webview和HTML5 webview
我看到的唯一"可疑"的事情是在按下"后退"时出错(Android错误):
sendUserActionEvent() mView == null
Run Code Online (Sandbox Code Playgroud)
这是Galaxy S4问题吗?Android问题?任何的想法?
tnx,Yaniv
我使用Protractor和Jasmine作为我的移动Angularjs应用程序.我想在特定元素上测试触摸事件(touchStart/touchEnd等...).就像是:
it('should play video', function(){
var poster = by.css('.video-poster');
element(poster).??? //Simulate touch event here
});
Run Code Online (Sandbox Code Playgroud) 我正在玩Angular 2.0 new router,我尝试使用类似于Angular 1.X ui-router/ng-route解析机制的东西.
我试图通过以下方式实现此目的RouteData:
import {Component, ViewEncapsulation} from 'angular2/core';
import {
RouteConfig,
ROUTER_DIRECTIVES
} from 'angular2/router';
// import {HTTP_PROVIDERS} from 'angular2/http';
import {HomeCmp} from '../home/home';
import {AboutCmp} from '../about/about';
import {NameList} from '../../services/name_list';
import {PersonalizationList} from '../../services/personalization_list';
@Component({
selector: 'app',
viewProviders: [NameList, PersonalizationList],
templateUrl: './components/app/app.html',
styleUrls: ['./components/app/app.css'],
encapsulation: ViewEncapsulation.None,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/', component: HomeCmp, as: 'Home', data: this.history },
{ path: '/about', component: AboutCmp, as: 'About' }
])
export class …Run Code Online (Sandbox Code Playgroud) angular ×6
javascript ×4
typescript ×3
android ×1
angularjs ×1
babeljs ×1
html5 ×1
html5-video ×1
ios ×1
jasmine ×1
protractor ×1
react-dom ×1
reactjs ×1
uiwebview ×1
webpack ×1