angular2-directives_编程技术问答社区_程序员问答知识库

以下是关于 angular2-directives 的编程技术问答

Angular2 ngIf在部署环境中不工作

我编写了一个非常简单的小Angular2应用程序，该应用程序已构建来生成锻炼表.但是，当我部署应用程序时，NGIF似乎不起作用(我的 ISP默认Weberver 或我自己的 heroku /本地部署的node-http-server).当我在Dev Node Server(npm start)上运行完全相同的代码基础时，NGIF按预期工作. 如果有人对我如何进行调试有一些指导，我将非常感激，或者我只是很明确地做错了什么... 这是相关代码 src/template.html Click on the top left word ({{word}})() app.ts import {bootstrap} from 'angular2/platform/browser' import {enableProdMode, Comp

0 2023-12-01 编程技术问答社区 gulp angular webpack angular2-template angular2-directives

Angular 2中的条件要求验证器指令

我需要根据其他字段的价值进行某些形式字段.内置的@Directive({ selector: '[myRequired][ngControl]', providers: [new Provider(NG_VALIDATORS, { useExisting: forwardRef(() => MyRequiredValidator), multi: true })] }) class MyRequiredValidator { @Input('myRequired') required: boolean; validate(control: AbstractControl): { [key: string]: any } { return this.required && !control.value ? { myRequired: true } : null; } } 示例用法:

4 2023-11-13 编程技术问答社区 validation typescript angular angular2-directives

如何在Angular 2中对一个指令进行单元测试？

问题:我希望能够在Angular 2中测试指令以确保其正确编译. 在Angular 1中，可以使用$compile(angular.element(myElement)服务，然后致电$scope.$digest().我特别希望能够在单元测试中执行此操作，以便我可以测试当Angular最终在my-attr-directive编译的代码中跨越时. 约束: 使用JavaScript 的角度2.所有相关的所有来源似乎都需要TS. 茉莉花中的单位测试一定不会那么骇客，以至于我的单位测试最终会破裂.请参阅解决方案使用测试床测试指令假设您有以下指令: @Directive({ selector: '[my-directive]', }) class MyDirective { public directiveProperty = 'hi!'; } 您要做的是创建一个使用该指令的组件(它可以是用于测试

2 2023-11-07 编程技术问答社区 javascript angularjs unit-testing angular angular2-directives

如何将jQuery导入Angular2 TypeScript项目中？

我想在Angular2指令中包装一些jQuery代码. 我安装了jQuery库，以通过以下命令在我的项目中键入: typings install dt~jquery --save --global 所以现在我的项目目录中的文件夹下的文件夹下面有jquery文件夹.另外，以下新行已添加到我的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"

2 2023-11-01 编程技术问答社区 jquery angular typescript angular2-directives typescript-typings

为什么我能够访问类的私有成员？

我的代码如下 @Component({ selector: 'my-app', template: ` {{hero1.name}} `}) export class AppComponent { heros2 : any = [ new heross('lee', 'lee'), new heross('lee1', 'lee1'), ];} class heross{ private name : string; constructor(name : string, details : string){ this.name = name; }} bootstrap(AppComponent); 为什么我可以在私有关键字中访问视图中的名称并显示名称解决方案

8 2023-11-01 编程技术问答社区 typescript angular angular2-template angular2-directives

共享模块的指令是不可见的

试图潜入Angular 2中具有一定经验的Angular 2并具有一些难题. 我做了一个共享模块: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Constants } from './injectables/constants'; import { Utils } from "./injectables/utils"; import { HighlightDirective } from "./directives/highlight"; @NgModule({ imports: [ CommonModule ], declarations: [ HighlightDirective ], providers: [ Constants, Utils ], exp

0 2023-11-01 编程技术问答社区 angular typescript angular2-directives angular2-services

如何在Angular 2中点击按钮时实现全屏窗口功能？

我为用户创建了登录页面.如果他们单击"提交"按钮，则该页面将导航到一个组件(test.component.ts，test.component.html，..). 我需要在全屏模式下使该窗口制作.喜欢，(HTML5中的视频控制全屏). submitLogin() { if (this.userName === 'Student' && this.passWord === 'student@123'){ this.dashboard = true; } else { alert('Incorrect Username or Password'); } } 我不知道如何实现全屏窗口功能.因为，我是Angular2的新手.谁能解决我的问题? 解决方案以下代码仅适用于浏览器的较新版本.从您的问题中，我确实分析了SubmitLogin()在单击按钮后调用.因此，单击按钮后，您可以使用以下方法实现全屏. submitLogin() {

4 2023-11-01 编程技术问答社区 typescript angular2-routing angular2-services angular2-directives

Angular 2/4：如何使用指令检查输入值的长度？

我已经创建了一个可以验证输入的自定义属性指令，它具有值.请参阅下面的代码. 我不知道为什么如果条件不起作用，在台中.log它仅显示0.我的代码有什么问题吗? 我也尝试了其他Angular的应用程序生命周期事件. 谢谢！ import { Directive, ElementRef, Input, AfterContentInit ,Renderer } from '@angular/core'; @Directive({ selector: '[inputfocus]' }) export class InputFocusedDirective implements AfterContentInit { public valLength; constructor(public el: ElementRef, public renderer: Renderer) {} ngAfterContentInit() { v

4 2023-11-01 编程技术问答社区 angular typescript angularjs-directive angular2-directives

扩展/装饰Angular 2组件和指令

我有一些用用例(如在装饰符图案中)的组件和指令中的2. 中的指令. 该示例是具有不适合这种情况的基本模板的组件，以至于更容易定义新模板而不是通过编程方式修改现有一个模板的DOM.组件元数据的其余部分应继承. 基本上是 export const BASE_SOME_COMPONENT_METADATA = { ... }; @Component(BASE_SOME_COMPONENT_METADATA); export class BaseSomeComponent { ... } ... import { BaseSomeComponent, BASE_SOME_COMPONENT_METADATA } from '...'; @Component(Object.assign({}, BASE_SOME_COMPONENT_METADATA, { template: '...' }); export class SomeComponent extends Ba

6 2023-11-01 编程技术问答社区 javascript typescript angular angular2-directives ecmascript-next

停止按钮点击事件的指令 Angular 2

我用Angular 2和Primeng构建了我的应用程序.我尝试在按钮上使用指令，以检查用户权威.问题是；如果没有权威，请勿继续按钮单击操作.但是停止流动不会停止点击事件.如果CheckAuth()返回false? 如何停止进程 blockquote @Directive({ selector: '[checkAuthOnClick]' }) export class CheckAuthorizationOnClickDirective { user: Observable; @Input() allowedClaim: any; observer: MutationObserver; constructor(private element: ElementRef, private store: Store) { this.element = element.nati

8 2023-11-01 编程技术问答社区 angular typescript events angular2-directives stoppropagation

Angular2 : 没有为String! (child -＞ String)在[Array in parent]的提供者。

im在Angular2中构建基本TODO应用程序时，当我单击"添加"按钮以将数据从父母发送到子女的使用输入时，我没有字符串的提供商！ (child-> string)，并且没有显示儿童课上仅显示数据的数据，这是什么意思这是父组件: @Component({ selector : 'parent-component', directives : [child], template : ` ToDo App Task Detail

0 2023-11-01 编程技术问答社区 typescript angular angular2-template angular2-directives angular2-forms

Angular2如何将父组件注入指令中，如果它存在的话？

我为我的自定义表组件提供了一个选择的指令.我希望我的指令的用户能够通过两种方式实例化: 1: 2: 我能够通过在我的指令的构造函数中使用主机，注入和向前ref的第一种方法: constructor(@Host() @Inject(forwardRef(() => MyCustomTableComponent)) table?: MyCustomTableComponent) { this.table = table; //later I c

0 2023-11-01 编程技术问答社区 angular typescript angular2-directives

Angular2通过属性将一个函数传递给一个指令

我正在尝试将父组件中的函数绑定到子部门上的属性中. 这就是我拥有的 @Component({ selector: 'awesome', templateUrl: 'awesome.html' }) export class AwesomeComponent { @Input() callback: Function; ngOnInit() { this.callback();//Error, this.callback is not a function, but contains a string value on the fuction call } } 这就是我的使用方式，但似乎不起作用解决方案您的代码仅将字符串nameOfFuncFromAnotherComponent绑定到callba

0 2023-11-01 编程技术问答社区 typescript angular angular2-directives

Angular 2自定义验证单元测试

我正在编写自定义Angular(Angular 2.0.0)验证，遵循本指南 https://angular.io/docs/ts/latest/cookbook/form-validation.html# !! #custom-validation . @Directive({ selector: '[ngModel][emailValidator]', providers: [{provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true}] }) export class EmailValidatorDirective implements Validator 现在，我正在尝试将单元测试添加到我的自定义验证指令中. beforeEach(() => { fixture = TestBed.createComponent(EmailComponent);

4 2023-11-01 编程技术问答社区 angular typescript angular2-directives angular2-forms angular2-testing

如何使Angular 2接受动态添加的routerLink指令

如这个plunker 我的元素归结为: @Component({ selector: 'my-comp', template: ``, }) export class MyComponent { private linkContent = 'GoTo Route'; private link; constructor(sanitizer: DomSanitizer) { this.link = sanitizer.bypassSecurityTrustHtml(linkContent); } } 这将导致GoTo Route被添加到DOM中，但是Angular对此元素上的routerLink指令一无所知，并且不"绑定"与之"绑定".

2 2023-11-01 编程技术问答社区 angular typescript angular2-routing angular2-directives

Angular 2在条件下改变类别

我在视图中有三个按钮，在页面加载上，我正在显示第一个按钮内容.单击按钮后，按钮将变得有效，但是在页面上加载初始按钮未设置为活动.为了显示第一个按钮活动，我将其添加到Div: [ngClass]="'active'" 现在的问题是单击另一个按钮时，第一个按钮将保持活动类.我正在评估基于字符串显示的数据.单击每个按钮，字符串会更改. 如何添加条件以检查当前字符串?因此，如果字符串与要显示的当前数据匹配，则将活动类添加到此按钮? 所以像这样的东西是我正在寻找的: [ngClass]="'active'" if "myString == ThisIsActiveString; 这是我当前的按钮，但是当我在此语法中添加时，没有添加类:

4 2023-11-01 编程技术问答社区 javascript angular typescript angular2-template angular2-directives

可作为ng-if使用的指令（Angular 2）

我正在尝试创建一个作为NGIF的指令，以控制是否允许使用正确权限的用户查看特定内容，类似的内容: You are allow to see this. 我正在阅读有关如何做的事情，并在此 doc doc 关于"属性指令"，但我仍然无法实现它(我是Angular 2的新手) 到目前为止，我有这个: import {Directive, ElementRef, Input} from '@angular/core'; @Directive({ selector: '[type-of-user]' }) export class TypeOfUserDirective{ constructor(private el: ElementRef){} @Inpu

0 2023-10-31 编程技术问答社区 angular typescript angular2-directives

Angular2, TypeScript, 如何读取/绑定属性值到组件类（ngOnInit中未定义）。

有人可以建议我如何读取/绑定属性值为@component类，而ngoninit方法似乎不确定? 这是一个plunker演示: 我想阅读" someattribute"属性的值在应用程序类(src/app.ts)ngoninit方法中. 谢谢！解决方案您可以注意到此类参数不能用于root组件.有关更多详细信息，请参阅此问题: Angular 2 Angular 2输入参数解决方法包括利用ElementRef类.它需要注入您的主要组件: constructor(elm: ElementRef) { this.someattribute = elm.nativeElement.getAttribute('someattribute'); } 我们需要在HTML文件中使用这种组件:

2 2023-10-31 编程技术问答社区 typescript angular angular2-template angular2-directives

Angular 4不能绑定到＜property＞，因为它不是＜component＞的已知属性。

我正在尝试在Angular 4中创建自己的指令.但是，当将类的属性绑定到组件模板中时，我会遇到此错误. 控制台错误: Unhandled Promise rejection: Template parse errors: Can't bind to 'data' since it isn't a known property of 'tree'. ("][data]="data">"): 我的tree-view-component.ts: @Component({ selector: 'app-tree-view', template: '' }) export class TreeViewComponent implements OnInit { @Input() data: any[]; constructor() {

14 2023-10-31 编程技术问答社区 angular typescript angular2-directives

Angular2获取窗口宽度 onResize

试图弄清楚如何在Angular2中调整事件的窗口宽度.这是我的代码: export class SideNav { innerWidth: number; constructor(private window: Window){ let getWindow = function(){ return window.innerWidth; }; window.onresize = function() { this.innerWidth = getWindow(); console.log(getWindow()); }; } 我在Bootstrap.ts文件中使用提供的窗口提供商在全球范围内使用提供的访问权限.我面临的问题是，这确实给了我一个窗口的大小，但是在调整窗口大小时 - 即使窗口更改大小，它也会一遍又一遍地重复相同的大小.

2 2023-10-31 编程技术问答社区 css typescript angular angular2-directives

首页
<
1
2
3
4
5
6
7
8
>
尾页