标签: angular2-directives

我正在尝试将我制作的组件导入主组件,但它不能正确渲染,只<helloworld>Testing...</helloworld>显示在浏览器上

这是我的主要component.ts文件:

import {bootstrap} from 'angular2/platform/browser';
import {Component, View} from 'angular2/core';
import {eye} from 'eyeComponent';       //importing components
import {hair} from 'hairComponent' ;

@Component({
selector : 'helloworld',
directives : [hair, eye]
});

@View({
template : `<div>
            <hair></hair>
            <eyes></eyes>
            </div>
`
  })
export class helloworld {

}

bootstrap(helloworld);

这是我导入的组件文件

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';

@Component({
selector : 'eyes',
template : `<h1> eyes </h1>`
});

export class eye{

}

bootstrap(eye);

这是另一个component.ts文件:

import {bootstrap} from 'angular2/platform/browser';
import {Component} from …

我正在努力让@Directive按预期工作.

我希望Attr Directive能够访问指令构造函数中的model.password并使用当前密码设置变量varpassword.

我还希望能够检索表单字段中的所有其他输入,我将如何进行此操作？

很多这方面的文档都不完整,因为我知道Beta.

我一直在努力解决这个问题,并且成功有限.我已经删除了我试图让它继续工作的导入,因为我觉得我很困惑如何在指令中正确使用它们我试过"NgModel,NgControl,ControlGroup,NgFormModel,FormBuilder ......".

我的测试示例代码如下.

登录-form.html

<form #testForm="ngForm">
    Email Address: 
    <input type="text" name="username" size="50" required="required" [(ngModel)]="model.username" ngControl="username" #username="ngForm" />

    Password: 
    <input type="password" name="password" size="20" required="required" [(ngModel)]="model.password" ngControl="password" #password="ngForm" testdir />

    <input type="submit" value="Login" />
</form>

app.ts

import {Component} from 'angular2/core';

import {TestDirective} from '../../directives/test.directive';

@Component({
    selector: 'test-app',
    templateUrl: 'login-form.html',
    directives: [TestDirective]
})
export class TestApp {}

test.directive.ts

import {Directive} from 'angular2/core';

@Directive({
    selector: '[testdir]',
    host: {
        '(keydown)': 'run()'
    }
})
export class TestDirective {

    varpassword: string;

    constructor() …

目前,我有一项服务可以从我编写的许多API中获取值.在模板中,我希望只有当值存在时才输出以下html,或者当它们被送到模板时结果中不为空:

<li class="title rh-blue-lite-fg">{{ project.meta_header_one }}</li>

所以我试图找出如何在ngIf中包装它或者是否有其他方法来执行此操作,以便只有当该值存在且非空时才会输出此'li'项

我正在使用最终的Angular 2发行版.我已经设置了官方网站angular 2 quickstart中提到的启动文件.在我的app.component.ts文件中,我制作了2个组件.代码如下所示: -

    import { Component, OnInit} from '@angular/core';

@Component({
    selector: 'demo',
    template:`
        <h2>Hi, demo !!</h2>
    `
})

export class DemoComponent implements OnInit{
    constructor(){}

    ngOnInit(){

    }
}

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1> 
    <demo></demo>
    `

})
export class AppComponent implements OnInit{ 
    constructor(){}
    ngOnInit(){

    }
}

在my-app的组件中,我使用了指令选择器,它是一个数组.但编辑器(VS Code)显示错误.chrome控制台抛出错误,告诉 模板解析错误:'demo'不是已知元素:

请帮我解决这个问题.谢谢

这是我的app.module.ts文件

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent …

我有一个project包含一些属性和数组的对象,当我尝试像这样循环它时,它不起作用:

<img *ngFor="let image of {{project?.acf.images}}" src="{{image.image.url}}">

当我像这样显示它时{{project?.acf.images[0].image.url}},它完美地显示了网址.我的语法有什么问题吗？

从使用Bootstrap 4构建导航菜单,我创建了一个顶部导航菜单:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <div class="container">
        <a class="navbar-brand">Angular Router</a>
        <ul class="nav navbar-nav" routerLinkActive="active">
            <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
            <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
            <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
        </ul>
    </div>
</nav>

<router-outlet></router-outlet>

问题是,当我点击菜单项时home,它不会显示为活动状态.我没有包括在内bootstrap.js.

而不是bootstrap.js&jQuery,我可以在Angular 2中将所选菜单设置为活动的最佳方式是什么？

在Angular 1中,您可以使用&将函数作为参数传递给属性指令.我知道你可以使用函数将函数作为输入传递给Angular 2中的元素指令(组件)

<custom-component [callback]="myCallbackFuncton">
..etc
</custom-component>

语法,但有没有办法只使用属性指令？我只能得到一个字符串(它允许我在范围内查看该函数),但更愿意一次性传递该函数.所以我希望能够在我的模板中写出这样的东西

 <form custom-submit="ctrl.register">
 ...etc
 </form>

并在指令js中,

@Directive({
    selector: '[custom-submit]',
})
@Inject('$element', '$attrs')

export default class CustomSubmit {
    constructor($element, $scope, $attrs) {
        this.$element = $element;

        $element[0].addEventListener('submit', () => {
          // custom validation behaviour
          $attrs.customSubmit();
        });
   }
}

而不是必须写像

 $scope.ctrl[$attrs.customSubmit]()

在Angular 2中,我得到了一个项目列表,并根据给定的条件(即基于位置编号)我设置列表重复.

我需要为每个位置的第一个框隐藏" 删除文本 ".

Plunker: https://plnkr.co/edit/xtX5BjTBjO61sD2tLwWN ？p = preview:

[1]: https://plnkr.co/edit/xtX5BjTBjO61sD2tLwWN?p=preview

import {Component} from '@angular/core';

@Component({
	selector: 'app',
	template: `
	  
    <ul *ngFor="let locdata of locations">
   
     <template ngFor let-item [ngForOf]="items"; let-i=index>
          <div *ngIf="item.location==locdata.location">
             <div class="title"> location  {{ item.location}} <span  *ngIf="isNotFirst(item)">  remove </span> </div>
          <div class="container"> {{ item.sedule}}</div>
       </div>
      </template>
	  </ul>
	 
	`
})
export class App {
  items: string[];
  
   isNotFirst(item: any) {
      return this.items.filter(i => i.location === item.location).map(i => i.id).indexOf(item.id) !== 0;
    }
  
  locations:any;
  
  constructor() {
    this.locations=[{location:1},{location:2},{location:3}]; …

我想根据使用角度2的表内的下拉选择来显示JSON数据中的不同值.

<div>
    <label for="input-one">select</label>
</div>
<div>
    <select>
        <option value="">--- Select ---</option>
        <option value="ABC">ABC</option>
        <option value="def">def</option>
   </select>
</div>

例如:

如果选择ABC,则应显示与表中的JSON数据匹配的ABC值.如果选择def,它应该显示来自表中JSON数据的匹配值.

我想在Angular 2中这样做.请告诉我可能是什么解决方案.

创建模型驱动的表单时，出现错误：错误：formControlName必须与父formGroup指令一起使用。您将要添加一个formGroup指令并将其传递给现有的FormGroup实例（您可以在类中创建一个）。

请告诉我这段代码出了什么问题。

app.component.html

<div class="col-md-6">
  <form  (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
    <div class="form-group">
      <label for="sessionName">Session Name:</label>
      <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
    </div>
    <div class="form-group">
      <label for="abstract">Abstract:</label>
      <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

app.component.ts

export class CreateSession {

    newSessionForm:FormGroup;
    abstract : FormControl;
    name : FormControl;

    ngOInInit(){
        this.name = new FormControl('', Validators.required)
        this.abstract = new FormControl('', Validators.required)

        this.newSessionForm = new FormGroup({
            name:this.name,
            abstract: this.abstract
        })         
    }


    saveSession(formValues){
        console.log(formValues);
    }