有人可以请教我如何读取/绑定属性值到@component类,这似乎是在ngOnInit方法中未定义？
这是一个有趣的演示:http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw？p = preview
我想读取"someattribute"属性的值
<my-app [someattribute]="'somevalue'">
在App类(src/app.ts)ngOninit方法中.
谢谢!
我正在开发一个Angular2应用程序.我需要为所有链接添加特殊行为,所以在角度1.xi中只会写一个这样的指令:
angular.module('whatever.module', []).directive('href', function() {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
// do stuff
}
};
});
在angular2中,我可以编写如下指令:
@Directive({
selector: '[href]',
})
export class MyHrefDirective {
constructor() {
// whatever
}
}
但是我怎么能告诉应用程序全局使用该指令呢？我有很多关于它们的链接的观点.我是否必须导入它并directives在每个组件中的数组中指定它(这是很多)？
我尝试将它注入到bootstrap函数中,就像你应该使用服务来全局拥有一个实例但是没有用
所以这是交易.我有一个非常好的组件,并在很多地方使用.现在我需要使用相同的组件,但希望根据条件呈现不同的模板.
我尝试了很多.
1)尝试使用多个组件装饰器 - 没有运气
2)尝试了多层次的抽象,我最终创造了更多的组件 - 糟糕的主意
3)可以逐字复制整个组件,只需更改选择器和模板 - 坏主意
4)目前我正在尝试这个:
<div *ngIf="!isWizard">
<ul class="nav" role="tablist">
<ng-content select="tab-link"></ng-content>
</ul>
<ng-content select="tab-content"></ng-content>
</div>
<div *ngIf="isWizard">
<nav class="nav-panel sidenav">
<ng-content select=".wizard-title"></ng-content>
<ul class="nav" role="tablist">
<ng-content select="tab-link"></ng-content>
</ul>
</nav>
<main class="settings-panel content-area">
<ng-content select="tab-content"></ng-content>
</main>
</div>
我将isWizard属性设置为true/false.现在的问题是,ng-content只运行一次.因此,当isWizard为true时,即使显示div块,ng-content也不会运行(导致它在上面的块中运行).
5)而不是使用ngIf我也尝试过ngSwitch - 没有用
我现在很绝望.请帮忙 :)
我意识到,这个问题是重复但前一次没有提供适当的答案时刻包已经安装
1.安装包裹
npm install moment-timezone --save
在node_modules目录中
|
| --moment
| --moment-timezone
目录存在
2. Index.html包含脚本
<script src="node_modules/moment-timezone/moment-timezone.js"></script>
System.config.js
var map = {
'moment': 'node_modules/moment',
'momentzone': 'node_modules/moment-timezone'
};
var packages = {
'moment': { defaultExtension: 'js' },
'momentzone': { defaultExtension: 'js' }
};
3.Inside component.ts文件
import * as moment from 'moment/moment';
export class TimeComponent implements OnInit{
ngOninit(){
console.log(moment("2014-06-01T12:00:00Z").tz('America/Los_Angeles').format('ha z'));
}
}
应该导入什么来防止错误 属性tz在"Moment"类型上不存在
我需要在Angular2应用程序中使用FileSaver.js(https://github.com/eligrey/FileSaver.js/).
我知道我可以在主html页面中将其添加为脚本文件,它将起作用.但是我想知道在Angular 2(TypeScript)应用程序中最好的方法是什么,这样我就可以调用window.saveAs来保存文件.
我想在Angular2指令中包含一些jQuery代码.
我使用以下命令将Typings的jQuery库安装到我的项目中:
typings install dt~jquery --save --global
所以现在我的项目目录中有jquery文件夹下的typings/global文件夹.此外,我的typings.json文件中添加了以下新行:
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160807145350",
"jquery": "registry:dt/jquery#1.10.0+20160908203239"
}
}
我开始编写一个新的Angular2指令(我导入到app-module文件中),但我不知道如何正确导入jQuery库.这是我的源文件:
import {Directive} from '@angular/core';
@Directive({
selector: "my-first-directive"
})
export class MyFirstDirective {
constructor() {
$(document).ready(function () {
alert("Hello World");
});
}
}
但我不能使用,也不$也不是jQuery.你下一步怎么做？
jquery typescript angular2-directives typescript-typings angular
我正在尝试在Angular 4中创建自己的指令.但是,当将类的属性绑定到组件模板时,我得到了这个错误.
控制台错误:
Unhandled Promise rejection: Template parse errors: Can't bind to
'data' since it isn't a known property of 'tree'. ("<tree [ERROR
->][data]="data"></tree>"):
我的tree-view-component.ts:
@Component({
selector: 'app-tree-view',
template: '<tree [data]="data"></tree>'
})
export class TreeViewComponent implements OnInit {
@Input() data: any[];
constructor() {
this.data = [
{
label: 'a1',
subs: [
{
label: 'a11',
subs: [
{
label: 'a111',
subs: [
{
label: 'a1111'
},
{
label: 'a1112'
}
]
},
{
label: 'a112'
}
]
},
{
label: 'a12', …鉴于以下组件:
@Component({
selector: 'compA',
template: template: `<compB [item]=item></compB>`
})
export class CompA {
item:any;
updateItem():void {
item[name] = "updated name";
}
}
@Component({
selector: 'compB',
template: template: `<p>{{item[name]}}</p>`
})
export class CompB implements OnInit{
@Input() item: any;
someArray: any[];
ngOnInit():void {
someArray.push("something");
}
}
据我所知,除非item更改完整对象,否则angular2无法识别更改item.因此,我想item在updateItem调用方法时手动发出更改事件.然后,使子组件CompB重新渲染,就像角度检测到常规方式的变化一样.
目前,我所做的是通过链接实现ngOnInitfor方法CompB并在方法内调用该方法.故事的另一部分是我的实际来源有像我想在每个渲染中重置的对象.我不确定重新渲染重置.目前,我正在重置它们的方法.updateItemViewChildsomeArraysomeArrayngOnInit
所以,我的问题是:如何触发对父对象的更深层元素的更改进行重新渲染？
谢谢
我正在使用Angular 2,并希望使用htm ngif coniditon检查变量值是否在角度中未定义
如果我使用<span*ngIf ="!testvar">
它还涵盖了变量testvar = 0时的情况,但我想排除它为0时的情况
以下作品,但这些是2个检查:
<span *ngIf="!testvar && testvarl != 0"></span>
我想检查这个案例,只是为了缩短它并使其更清洁.有一个简单的方法吗？
我有这个我通过Id引用的元素:
let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');
当浏览器到达元素的底部时我需要监听.
怎么做到这一点？