大家好:我有一个组件.组件视图有一个表:
<div class="container">
<h2>Recipients List</h2>
<br>
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Phone</th>
<th>Status</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#rp of arrAll">
<td>{{rp.id}}</td>
<td>{{rp.name}}</td>
<td>{{rp.phone}}</td>
<td>{{rp.isActivated?'Active':'Inactive'}}</td>
<td>
<input #{{rp.id}} type="checkbox" (change)="checkbox(value)">
</td>
</tr>
</tbody>
</table>
<button class="btn btn-success" (click)="newRecipient()">New Recipient</button>
<button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>
这是使用*ngFor生成的表视图图像的链接.
业务逻辑是"单击删除按钮时,必须删除所有已检查的收件人".我想将一个参数传递给我的删除函数(我认为应该是一个包含已检查的收件人ID的数组)
这是我的组件代码:
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import { Router, RouteParams } from 'angular2/router';
import {RecipientsService} from'../../services/recipients/recipients.service';
import {Recipient} from '../../models/recipient/recipient';
@Component({
selector: 'recipient-list-view',
templateUrl: './app/components/recipient-list-view/recipient-list-view.html', …我是Angular的新手.我开始用ver.2.
我需要链接到一个file://...URL.我试过正常href:
注意: app是处理应用程序的Web的模型对象.
<a target="_blank" href="file://{{app.outputPath}}/index.html">no link here</a>.
这不起作用 - 链接在那里,具有正确的URL,但Angular似乎以某种方式阻止事件.为什么？
所以我见过ng-href但是那是Angular 1.x. 而且我所知道的并非*ngHref如此.所以这只是一个天真的尝试:
<a target="_blank" *ngHref="file://{{app.outputPath}}/index.html">over a directive</a>.
此外,我看到了一些路由,但似乎只适用于应用程序中的内部链接:
<a [router-link]="['/staticReport', {path: app.outputPath}]">see the report</a>.
app.component.ts:
@RouteConfig([
...
{path:"/staticReport/:path", redirectTo: 'file:// ???? ' }
])
创建外部链接的方法是什么？
external hyperlink angular2-directives angular2-routing angular
我想通过使用host属性从另一个指令向一个元素添加一个指令,但是似乎没有办法引用另一个指令.
@Directive({
selector: '[one]',
host: { '[two]': '"some-value"' }
// How can I reference DirectiveTwo here?
})
export class DirectiveOne { }
@Directive({
selector: '[two]'
})
export class DirectiveTwo { }
执行此操作时,我得到标准"无法绑定到'两个',因为它不是已知的本机属性"错误.
引用和使用另一个指令的正确方法是什么？
我正在尝试创建一个作为ngIf的指令来控制具有正确权限的用户是否允许查看特定内容,如下所示:
<div [type-of-user]="load data from the user and check it (normal or premium)">
<h3>You are allow to see this.</h3>
</div>
我正在阅读有关如何做到这一点,并在本文档中找到"属性指令",但我仍然无法实现它(我是Angular 2的新手)
到目前为止我有这个:
import {Directive, ElementRef, Input} from '@angular/core';
@Directive({
selector: '[type-of-user]'
})
export class TypeOfUserDirective{
constructor(private el: ElementRef){}
@Input('type-of-user') userControl: string;
private haspermission(permission: string) {
/*the style background color is just to test if works*/
this.el.nativeElement.style.backgroundColor = permission;
}
}
我已经在app.module中添加了该指令.
任何建议如何进行将是伟大的.
我正在尝试创建一个Angular 4指令,class="active"当文本字段不为空时,该指令将添加到标签上
<div class="md-form">
<input appMdbInputInit type="text" name="" id="FirstName"
class="form-control" formControlName="firstName">
<label for="FirstName" >First Name</label>
</div>
当textfield不为空时我期望的结果
<div class="md-form">
<input appMdbInputInit type="text" name="" id="FirstName"
class="form-control" formControlName="firstName">
<label class="Active" for="FirstName" >First Name</label>
</div>
我怎样才能做到这一点 ？
非常感谢
我制作了一个组件,其中我有一个输入字段和按钮.单击按钮我正在绘制第二个组件.我想将数据从一个组件发送到另一个组件？
我将如何将数据从一个组件发送到另一个组件.我需要发送输入值(输入字段中的用户类型)我需要在下一个组件或下一页显示.单击按钮.如何发送数据？这是我的傻瓜 http://plnkr.co/edit/IINX8Zq8J2LUTIyf4DYD?p=preview
import {Component,View} from 'angular2/core';
import {Router} from 'angular2/router';
@Component({
templateUrl: 'home/home.html'
})
export class AppComponent {
toDoModel;
constructor(private _router:Router) {
}
onclck(inputValue){
alert(inputValue)
this._router.navigate(['Second']);
}
}
angular2-directives angular2-template angular2-routing angular
我的应用程序有很多图像与描述.当用户导航时,这些文本首先出现,图像加载时有一些延迟.我想在这里添加一个微调器.一个指令,在加载图像时显示微调器并显示图像
<myimgdir [src]='myimage.png'></myimgdir>
如何添加微调器和跟踪图像是否加载并显示它？
我正在尝试为Jquery UI Datepicker创建自己的Angular 2指令.我在互联网上看到了一些不同的方法,但也没有人达到我想要的目标.所以这是我到目前为止的代码:
import {Directive, ElementRef, Input, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
declare var $:any;
@Directive({
selector: '[date-picker]',
providers: [{
provide: NG_VALUE_ACCESSOR,useExisting:
forwardRef(() => DatePickerDirective),
multi: true
}]
})
export class DatePickerDirective implements ControlValueAccessor {
private value: string;
@Input('changeMonth') changeMonth:boolean = true;
@Input('changeYear') changeYear:boolean = true;
constructor(private el: ElementRef) {
}
ngAfterViewInit(){
$(this.el.nativeElement).datepicker({
changeMonth: this.changeMonth,
yearRange: "1:100",
changeYear: this.changeYear
}).on('change', e => this.onChange(e.target.value));
}
onChange: Function = () => {};
onTouched: Function = () => {}; …我有一个指令,我想在多个模块中使用它.在每个模块上声明它会产生错误.因此,我尝试在共享模块中声明它并将此共享模块导入其他模块.但是,它没有用.它仅在组件自己的模块上准确声明时才有效.
这是我的SharedModule:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GeneralDataService } from './general-data.service';
import {ModalDirective} from '../directives/modal.directive';
@NgModule({
imports: [
CommonModule
],
providers: [GeneralDataService],
declarations: [ModalDirective]
})
export class SharedModule { }
我想要使用的模块ModalDirective:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './patient.component';
import {SharedModule} from '../shared/shared.module';
@NgModule({
imports: [
CommonModule,
SharedModule
],
providers: [ ],
declarations: [ MyComponent ]
}) …我有一个像这样的输入文本字段
<input type="text" class="form-control" [inputTextFilter]="A" [ngModel]="name">
我的指示是:
import { Directive, Input, HostListener } from '@angular/core';
@Directive({
selector: '[inputTextFilter]'
})
export class InputTextFilterDirective {
@Input('inputTextFilter') params: string;
@HostListener('keypress', ['$event'])
onKeyUp(event: KeyboardEvent) {
console.log('got parameters: '+this.params);
}
}
我创建了一个名为"inputTextFilter"的指令,我想传递"A"参数.我传递的参数始终显示为未定义.