标签: angular-directive

如何从Angular 4中的select选项中获取值？

我想将它分配给component.ts文件中的新变量.我试过这个,但没有输出.

你也可以用[(ngModel)]吗？

component.html

<form class="form-inline" (ngSubmit)="HelloCorp(f)" #f="ngForm">
     <div class="select">
         <select class="form-control col-lg-8" #corporation required>
             <option *ngFor="let corporation of corporations" [value]="corporationObj">{{corporation.corp_name}}</option>    
         </select>
             <button type="submit" class="btn btn-primary manage">Submit</button>
     </div>
</form>

component.ts

HelloCorp() {
const corporationObj = corporation.value;
}

我想阅读一个csv文件,并使用AngularJS和HTML5获取其内容.我想将csv文件的内容放在$ scope中.

我在我的HTML中有这个代码

 <table align="center" >
            <tr class="borderless">
                <td>Choose .csv file</td>
                <td><input type="file" name="readCsvFile" id="readCsvFile" accept=".csv"> </td>
                <td><input type="button" value="Upload" ng-click="uploadCsvFile()"></td>
            </tr>
 </table>

在我正在研究的新项目中,我已经开始使用组件而不是指令.

但是,我遇到了一个问题,我找不到具体的标准方法来做到这一点.

从孩子到父母通知事件很容易,您可以在我的下面的plunkr上找到它,但是从父母到孩子通知事件的正确方法是什么？

Angular2似乎通过使用类似的东西解决了这个问题:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-local-var 但是我没有tink有可能定义一个子组件的"指针",就像#timer的例子一样

为了保证可以轻松转换为Angular2,我想避免:

• 事件发射(从示波器发射和广播)
• 使用来自子节点的require(然后将一个回调添加到parent..UGLY)
• 使用单向绑定,在子项中注入范围,然后"监视"此属性..更多UGLY

示例代码:

var app = angular.module('plunker', []);

app.controller('RootController', function() {
});

app.component('parentComponent', {
  template: `
    <h3>Parent component</h3>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Notify Child</a>
    <span data-ng-bind="$ctrl.childMessage"></span>
    <child-component on-change="$ctrl.notifiedFromChild(count)"></child-component>
  `,
  controller: function() {
    var ctrl = this;
    ctrl.notifiedFromChild = function(count){
      ctrl.childMessage = "From child " + count;
    }
    ctrl.click = function(){
    }
  },
  bindings: {
  }
});

app.component('childComponent', {
  template: `
    <h4>Child component</h4>
    <a class="btn btn-default btn-sm" ng-click="$ctrl.click()">Notify Parent</a>
  `,
  controller: function() …

我已经使用自定义指令来检测角度2中元素外部的单击,但角度4中不可能相同.

[plunkr] https://plnkr.co/edit/aKcZVQ?p=info

当我尝试在angular-4中使用相同的代码时,我收到以下错误:

1. Argument of type '{ template: string; directives: typeof ClickOutside[]; }' is not assignable to parameter of type 'Component'. ==> 

    @Component({
    templateUrl: "",
    directives: [ClickOutside]
    })


2. Type 'Subscription' is not assignable to type 'Observable<MouseEvent>'. in the directive inside ngOnInit() and ngOnDestroy() 

ngOnInit() {
    this.globalClick = Observable
        .fromEvent(document, 'click')
        .delay(1)
        .do(() => {
            this.listening = true;
         }).subscribe((event:MouseEvent) => {
            this.onGlobalClick(event);
         });
}

ngOnDestroy() {
    this.globalClick.unsubscribe();
}

如果角度4中的指令声明有任何变化请告诉我,官方文档对此事没有任何帮助.

我的代码,

  <modal *ngIf='showModal' [imageValue]="imageId"></modal>

我的模型组件,

@Component({
  selector: 'modal',
  templateUrl: './app/modal/modal.component.html',
  providers: [HeaderClass]
})


export class ModalComponent  {
  imageValue:any;

我想获得这个'imageValue'的价值,但我不知道该怎么做.任何人都可以帮助我.谢谢.

我刚刚将我在RC5上构建的应用程序升级到最终版本,而且我对我现在应该声明指令和管道的方式感到困惑.我收到这个错误:

ERROR在[默认] C:\ xampp\htdocs\meriem-car\public\src\app\components\administration.component.ts:12:4类型'{moduleId:string; selector:string; 指令:typeof LoginComponent []; templateUrl:string; }'不能分配给'Component'类型的参数.对象文字只能指定已知属性,"组件"类型中不存在"指令".

@Component({
    selector: '.donation',
    template: `
    <figure id="donation" move>
        <img src="image/qrcode.png"/>
        <figcaption>
        Buy me a cup of coffee.
        </figcaption>
    </figure>
    `
})
export class DonationComponent{}

@Directive({
    selector: '[move]'
})
export class MoveDirective{}

嘿,我想在MoveDirective和DonationComponent中获取元素的宽度/高度,我多次阅读文档但仍无法找到解决这个问题的方法.有人知道这个请帮帮我,非常感谢!

我有一个表,我想在其中显示一个表行,这是一个组件.而且我还想将数据传递给该组件:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

在my-component,HTML是少数几个<td></td>从data1和呈现的数据data2.

但是在渲染之后,由于<my-component></my-component>我的CSS破坏导致所有my-componentHTML(整个表行)显示在第1列中.

结果如上:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

我尝试了以下方法:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

但这会导致错误Can't bind to 'data1' since it isn't …

通常在Directives中,require: 'ngModel'如果我想将范围传递给它,我会使用它.这很好用.但我现在正在创建一个指令,该指令创建5个不同的HTML元素,每个元素都有不同的ngModel,它们是从父元素传递的.需要作为属性传递的ngmodel是ngModel1, ngModel2, ngModel3, ngModel4, ngModel5.如何require在指令内的条件中添加多个选项？

我试过这些并且它不起作用:

require: ['ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5'],

和

require: {'ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5'},

和

require: 'ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5',

和

require: 'ngModel1, ngModel2, ngModel3, ngModel4, ngModel5'},

如何添加多个需求选项？

编辑:

HTML代码:

<div get-vehicles-checkbox
            cars-ng-model="formData.cars"           
            bikes-ng-model="formData.bikes"         
            trucks-ng-model="formData.trucks"           
            van-ng-model="formData.van"         
            bus-ng-model="formData.bus"     
></div>

指示:

app.directive('getVehiclesCheckbox', function($compile) { 
  return {
    restrict: 'A',
    replace:true,
    // require: ?
    scope: {            
      carsNgModel: '=',
      bikesNgModel: '=',
      trucksNgModel: '=',
      vanNgModel: '=',
      busNgModel: '='
    },

    controller: 'SomeController',

    link: function(scope, …

考虑以下组件：

@Component({
  selector: 'app-test'
  template: 'Hello!'
}}
export class TestComponent {
  @Output() readonly selectionChange = new EventEmitter<SomeTypeHere>();
}

随着电话：

<app-test (selectedChange)="selectedChangeHandler($event)"></app-test>

请注意，我写的selectedChange不是正确的输出名称selectionChange。strictTemplates启用标志的 Angular 9根本没有帮助我。它默默地失败了。有趣的是，如果我对 做同样的事情@Input，应用程序会捕获错误并且不会编译。

如果我试图“听”一个不存在的东西，有什么办法可以抛出错误@Output吗？