我有一些Angular 1经验,但我们需要在Angular 2项目中使用gridstack.js.
我们熟悉gridstack-angular项目,但该项目是在Angular 1中.我认为我遇到的最大问题是Angular 2概念.
任何帮助,将不胜感激.
在开始之前请注意我最初在angular2 github网站上将此问题作为功能请求提出.但是请求已经结束,我被建议在这里发布.所以我在这里.希望在stackoverflow上我会有更好的运气.原始请求可以在这里找到:https://github.com/angular/angular/issues/10448.在这里,我只是重复我的初步要求.但是,您可以通过以下链接找到一些讨论.我们走了......穿过我的手指......
我需要能够一般地获得对父组件的引用,而子组件不必知道父组件的类型.基本上我需要这样的东西(伪代码):
@Component({
template: '<child></child>'
directives: [Child]
})
class ParentComponent{}
@Component({
selector: 'child'
})
class ChildComponent{
constructor(@Parent() _parent: any){}
}
基本上,我需要的_parent领域ChildComponent引用ParentComponent.但是要注意的类型如何_parent为any.这是any因为它可以是任何字面意思.ChildComponent是一个可以被任何类型的其他组件使用的通用组件.我知道这个问题有解决方案,但它们都需要孩子知道父母的类型.它是这样的:
@Component({
selector: 'child'
})
class ChildComponent{
constructor(_parent: ParentComponent){}
}
但同样,这对我不起作用,因为ChildComponent可以在任何类型的其他组件中使用,并且没有人知道另一个组件的类型.所以我需要的是一些注入ChildComponent其父组件的通用方法,如组件树中所设置的,不ChildComponent知道父类型.有谁知道我怎么能做到这一点？
谢谢
嗨,我正在创建一个Angular 2应用程序.似乎服务没有正确注入,因为我没有看到页面显示任何结果.我已将其设置risk-list.component.html为启动页面.有人能告诉我这是什么问题吗？
我也将代码上传到了一个plunker中
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RiskListComponent } from './components/risks/risk-list.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, RiskListComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { DataTable, Column } from 'primeng/primeng';
import { Router } from '@angular/router';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './components/home/welcome.component';
import …有没有像JQuery for Angular2 这样的$ .param()函数？
我知道Angular 1专门提供类似Angular1等效的服务
我在这里查看了Angular 2站点,他们有一个POST的演示,但他们在请求正文中发送了一个JSON.
我当前的,不工作的,尝试
saveEdits() {
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
this._http.post("ajax/update-thingy", JSON.stringify(this.dataJson), options)
.map(this.extractData)
.toPromise()
.catch(this.handleError);
// update in Angular 1 using JQuery function
// $http({
// method : 'POST',
// url : 'ajax/update-thingy',
// data : $.param($scope.formData),
// headers: {'Content-Type': 'application/x-www-form-urlencoded'}
// });
}
extractData(res: Response) {
let body = res.json();
if (body === 'failed') { …我需要在Web API项目中的Session Data中存储一个大对象.然后我需要,客户端上的一些HTML小部件想要在Web API的会话中访问该数据,并使用它做不同的事情,比如绘制数据的图表小部件,列出数据的HTML表.我不需要为每个客户端窗口小部件重新计算大对象,而是需要将其计算为ONCE并将其存储在会话数据中,以便在同一会话中的客户端上运行的任何窗口小部件都可以在会话中的不同时间访问该数据而不必等待服务器重新计算数据.
每个小部件都应使用不同的GET请求URL访问Web API服务器项目.
我很感激帮助.我可能已经对如何做到这一点进行了高级概述,但我可以使用一些指导.
我正在使用Angular 2和Bootstrap 3 工具提示.我有一个侧栏,布局和主要内容屏幕.在侧栏中,用户可以更改内容中项目的工具提示文本.
虽然因为工具提示文本没有更新而对我开玩笑.因此,对象将通过工具提示文本传递到我的内容面板中@Input().然后通过数据绑定[attr.title]=panel.tooltiptext.
现在,如果您更新工具提示文本,然后将鼠标悬停在文本上,您会看到工具提示文本未更新但仍保持悬停状态,您将看到带有正确文本的vanilla html标题.
Plunker的例子
main.component.ts - 这就像我的边栏,它比内容面板更高.
@Component({
selector: 'my-app',
template: `
<div>
<h2>{{desc}}</h2>
<tooltip-comp [panel]="panelObj"></tooltip-comp> <br>
<input [(ngModel)]="panelObj.tooltipText" style="width: 250px;" />
</div>
`,
})
export class App implements OnInit {
desc:string = 'Change tooltip text';
panelObj = {
tooltipText: "The Power of the "
};
constructor() {}
ngOnInit() {
}
}
tooltip.component.ts - 这是获取带有更新的工具提示文本的对象的内容面板.
@Component({
selector: 'tooltip-comp',
template: `
<div>
<a id="blah" href="#" data-toggle="tooltip" [attr.title]="panel.tooltipText">You Don't Know</a> …