我很困难,不知道如何解决我的问题......
简化:我有一个基于绑定创建ulist的组件,如下所示:
@Component({
selector: "template",
template: `
<ul>
<li *ng-for="#challenge of jobs.challenges">{{challenge}}</li>
</ul>
`})
export class JobTemplate{
jobs: Jobs;
constructor(jobs:Jobs){
this.jobs = jobs
}
}
组件选择器/主机嵌入在php回显的普通html流中,用于替换预定义的ulist.问题是在正常站点上,使用ulist之后的脚本标记在列表上应用一些jquery魔术.
由于脚本标记在组件模板加载完成之前被回显,因此jquery调用将找不到模板DOM的元素.将脚本标记放在我的模板中(最后)不起作用; 它似乎被忽略了.
<ul>
<a><li *ng-for="#challenge of jobs.challenges">{{challenge}}</li></a>
</ul>
<script>
$("ul a").on("click", function (event)
{
var parent = $(this).parent();
if(parent.hasClass('active'))
....slideToggle("normal");
else
....
});
</script>
此外,该站点使用基础框架,每次向页面添加新元素时(例如,通过外部更新我的组件的绑定),我需要调用$(document).foundation().
所以我的问题是,当我不知道我的模板是否已经完成创建时,如何在我的模板DOM上调用jquery.在我的组件模板中定义时,onload处理程序不起作用.
我读过有关AfterViewInit的内容,但我对此感到不知所措.有人可以请我朝正确的方向努力吗？
如何找出组件模板何时完全插入"主"DOM？
所以,假设我们有一个简单的对象,它包含两种不同语言的字符串
welcomeText = {"de": "Willkommen zurück!", "en": "Welcome back!"}.
该welcomeText是的属性Texts包含所有文本,并得到异步传输对象(所以我需要照顾可能未定义的值,因此猫王运营商).现在,在我的angular2模板中,我想基于当前选择的语言显示文本.
这是有效的(但不是我需要的):
..
{{Texts?.welcomeText?.de}} // works, as well as {{Texts?.welcomeText?.en}}
..
我想要的是这个(因为语言可以改变):
..
{{Texts.?welcomeText?[language]}}
..
不幸的是,这会导致错误:
EXCEPTION: Template parse errors:
Parser Error: Conditional expression
{{Texts?.welcomeText?[language]}}
requires all 3 expressions at the end of the expression ..
不知道如何解决这个错误.我只是不确定我是否使用它错了,或者它是不是打算像那样工作.目前我使用一个简单的解决方法,但我发现它有点难看,因为我有一个方法调用到处想要显示文本:
..
{{getText('welcomeText')}}
..
..
getText(name : string){
if(this.Texts)
return this.Texts[name][this.language]
..
这是仅仅是要走的路还是有办法以我想要的方式做到这一点,用elvis算子？
非常感谢任何答案!
我试图在Angular2的upgradeAdapter的帮助下升级Angular1应用程序.该应用程序使用upgradeAdapter进行自举,并按预期工作,至少只要我不尝试升级A1的集成服务之一.
假设我用打字稿写了这个A1服务:
//A1.ts
// inject decorator that in short does target.$inject = ...injects
@Inject('$rootScope')
class TestService{
constructor($rootScope: angular.IRootScopeService){
//$rootScope.whatever();
}
}
// register the service in application module
globalModule.service('TestService', TestService);
我可以在任何需要的地方以正常的A1方式注入TestService,并且它可以工作.
现在为A2升级我做:
//upgradeAdapter.ts
import {UpgradeAdapter} from 'angular2/upgrade';
const upgradeAdapter = new UpgradeAdapter();
export default upgradeAdapter;
//A2.ts
import upgradeAdapter from './upgradeAdapter'
import { Injectable, Inject} from 'angular2/core'
@Injectable()
export class A2TestService{
constructor(@Inject('$rootScope') _rootScope: angular.IRootScope){
//_rootScope.whatever()
}
}
upgradeAdapter.upgradeNG1Provider('$rootScope');
// tried with additional upgradeAdapter.upgradeNG1Provider('$rootScopeProvider');
upgradeAdapter.addProvider(A2TestService);
// make this service available in A1 …所以我有一个#container div 的简单设置，其中包含一个#field div。我还有一个不可见的 #hover 跨度，它跟随鼠标移动（居中）并且在悬停在 #field 上时变得可见。
HTML：
<body>
<div id="container" >
<div id="field"></div>
</div>
<span id="mouseHover" ></span>
</body>
JS：
$("#field").on({
mousemove: function (e) {
var left = parseInt($("#container").css("left")) || 0;
var top = parseInt($("#container").css("top")) || 0;
var newX = e.pageX - left - parseInt($("#mouseHover").css("width")) / 2;
var newY = e.pageY - top - parseInt($("#mouseHover").css("height")) / 2;
$("#mouseHover").css({ left: newX, top: newY });
console.log("MMove");
},
mouseenter: function(e){
$("#mouseHover").show();
console.log("MEnter");
},
mouseleave: function(e){
$("#mouseHover").hide();;
console.log("MLeave");
}
});
但是，当悬停在该字段上时，只要我移动鼠标，它就会触发无数的 mouseenter 和 …
我得到了以下代码,它包含一个DataGrid,它列出了项目,同时反映了ListBox中的选定项目.一切正常,但DataGrid列的宽度很奇怪.我将"name"列的宽度设置为星号,以便"wert"列获取其内容所需的空间,"name"列获取其余内容.这是有效的,但有一点问题.当应用程序启动时,所有列都处于其最小宽度,并且只选择ListBox中的另一个项目将列的宽度更新为所需的值("name"为星形,"wert"为auto).我尝试在应用程序加载时使用datagrid的UpdateLayout方法,但这没有帮助.
此外,我正在使用扩展器,并且当所有扩展器都关闭时,我必须首先展开其中一个项目,然后在列表框中加载另一个项目以使宽度正确.
有谁能请我指出正确的方向？:)
更新:初始问题已解决,但还有一个小问题:列不再崩溃,但它们也没有达到所需的大小.它们的大小适合其标题名称,而不是行内容.这仅在默认情况下关闭扩展器时发生.当我将扩展器设置为展开时,根据需要将所有列设置为其内容宽度.
这是使用过的代码:
<Grid.DataContext>
<XmlDataProvider x:Name="XmlData" Source="entries.xml" XPath="Root/Person" />
</Grid.DataContext>
<ListBox Name="PersonListBox"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource listBoxTemplate}"
IsSynchronizedWithCurrentItem="True"
Visibility="Visible" SelectionMode="Single" SelectedIndex="-1" DataContext="{Binding}">
</ListBox>
<DataGrid IsSynchronizedWithCurrentItem="True" Name="itemGrid"
DataContext="{Binding ElementName=PersonListBox, Path=SelectedItem}"
CanUserResizeColumns="False"
CanUserResizeRows="False"
IsReadOnly="true"
Background="White"
HorizontalScrollBarVisibility="Hidden"
AutoGenerateColumns="False">
<DataGrid.Resources>
<CollectionViewSource x:Key="items" Source="{Binding XPath=item}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="@name"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</DataGrid.Resources>
<DataGrid.ItemsSource>
<Binding Source="{StaticResource items}"/>
</DataGrid.ItemsSource>
<DataGrid.Columns>
<DataGridTextColumn Width="*" Header="Name" Binding="{Binding XPath=@name}"/>
<DataGridTextColumn Header="Wert" Binding="{Binding XPath=@value, Converter={StaticResource sumConverter}}}"/>
</DataGrid.Columns>
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander >
<Expander.Header> …我有点困惑.使用ngModel我可以执行以下操作:
import {NgModel} from "angular2/common";
@Component({
selector: "test",
template: `<input tpye="text" [(ngModel)]="strInObj.str"> {{strInObj|json}}`,
directives: [NgModel]
})
class Test{
strInObj: {str: string} = {str: "this is a string"};
}
现在当我输入输入时,strInObj.str会更新.我对此感到困惑,因为据我所知,字符串是不可变的,并且无法找到引用的父级.
在这种情况下,我str直接传递属性,这意味着ngModel获取对字符串的引用.如果它"更改"该引用上的字符串,则会创建一个新字符串,因此不会更改strInObj.str指向的原始字符串.至少这是我的理解.
并且没有办法找到传递给ngModel的引用的父级(没有概念str.parent(),会返回strInObj)那么他们如何做到这一点？我试图理解ts和js的来源,但是......好吧,我在这里.
我试图建立一个类似的指令,但最终只能传递包裹字符串的对象,我没有找到一种方法来修改原始对象str直接传递属性....(在示例中,我将传递strInObj给我指令,然后将使用str传递的对象的属性,这工作正常).
如果有人能帮我解开这个,我会很高兴:)
编辑
在这个plunker中,我有自定义指令StrDirective和带有NgModel指令的输入字段.两者都具有相同的绑定exampleStr,在简单的范围内输出.
现在,当我在输入中输入文本时,您可以看到exampleStr正在更新.这是预期的行为.我知道这很有效.
该StrDirective更新的时候点击约束力.您可以看到它更新了字符串的"工作副本",但exampleStr没有更新.
我现在的问题是:他们是如何做到的/我怎样才能让我的指令更新ExampleStr而不必将其包装在对象中？
angular ×4
javascript ×3
jquery ×2
angularjs ×1
css ×1
datagrid ×1
html ×1
immutability ×1
key ×1
string ×1
typescript ×1
upgrade ×1
wpf ×1
xaml ×1