标签: angular2-template

为了给出我面临的确切场景，我正在尝试使用 Webpack 将 Zurb 的 Foundation 包捆绑到我的应用程序中。纵观捆绑JS，基金会SCSS是越来越进口的，但我不知道如何将它应用到我的应用程序的渲染。

我require('../../node_modules/foundation.scss/foundation.scss)在根组件的 style 属性中尝试了 a ，这似乎确实设置了该组件的 HTML 的样式，但没有设置任何子组件的 HTML 的样式。

这样做的正确方法是什么？

如果父组件将对象传递给子组件

<child-component [someValue]="someObject"></child-component>

如果子组件修改了someObject，这个改动会反映在父组件上吗？

我对 Angular 2 还是很陌生，无法解决这个问题。

我正在尝试获取用户当前位置并将其坐标保存在名为“location”的变量中。尝试完成此操作时，我收到以下错误消息：

代码如下所示：

import { Component, AfterViewInit } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';
import { AgmCoreModule } from 'angular2-google-maps/core';


@Component({
selector: 'app-home',
templateUrl: './app.home.html',
styleUrls: ['./app.home.css']
})
export class HomeAppComponent {
  //restaurants: FirebaseListObservable<any[]>;
  zoom: number = 8;
  lat: number;
  lng: number;
  location: any = {};

  constructor(private af: AngularFire) {
     //this.restaurants = af.database.list('/restaurants');
  }

  ngAfterViewInit() {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(this.setPosition);
     }
  }

  setPosition(position) {
     this.location = position.coords;
     console.log(position.coords);
  }

}

将属性位置设置为以下内容时：

location.lat = …

我正在尝试构建一个树组件，其中od-tree-node组件递归嵌套以构建子节点。我在处理事件时遇到问题。对于叶子节点上的点击事件，鼠标事件总是触发，就好像事件发生在最顶部的组件上一样。我不知道如何处理这个。

预期行为：当用户单击叶/父/根节点时，父组件（例如：）app.component.ts需要知道单击了哪个节点。

当前行为：无论点击哪个节点，都选择根节点（发射到父组件）

plunker : https://plnkr.co/edit/JZTlA5?p=preview

这是模板：

节点.component.html

<!-- parent node -->
<label [attr.for]="resource.resourceType" [class]="cssClasses" *ngIf="resource.hasChildren()" [hidden]="matchedChildrenCount(search, resource) === 0">
     <a (click)="toggleNode($event)"> <i [class]="getNodeStateIcon()"></i></a>
     <input type="checkbox" *ngIf="showCheckboxes" [checked]="selected">
     <a [title]="resource.resourceName" (click)="selectNode($event);">
        <i [class]="resource.getIcon()"></i> {{resource.resourceName}} | {{ matchedChildrenCount(search, resource) | lpad : 2 : '0'}}
     </a>
</label>
<!-- leaf node -->
<label [attr.for]="resource.resourceType" [class]="cssClasses" *ngIf="!resource.hasChildren()" [hidden]="!isMatched(search, resource)">
     <input type="checkbox" *ngIf="showCheckboxes" [checked]="selected">
     <a [title]="resource.resourceName" (click)="selectNode($event);">
        <i class="icon-status-indicator"></i> {{resource.resourceName}}
        <div class="group" *ngIf="resource?.group !== 'Default'">{{resource.group}}</div>
     </a>
</label>
<!-- recrusive child …

“细节”在* ngFor从未来的服务器，是它包含列表。我正在从中选择一个项目。我想让该按钮在用户单击时处于活动状态，并且它应该保持活动状态，直到用户从列表中选择另一个选项。我正在使用[ngClass]但它正在激活一个按钮1 到 2秒。

<ion-list>
    <button ion-item [ngClass]="configop.selection" *ngFor="let configop of detail" (click)="itemSelected(configop)" >
        <div class="ion-item optionalItem">
            <div class="ion-button">
                <span class="color-code" >
                    <img src="{{configop.image}}">
                    </span>
                    <span class="color-name">{{ configop.name }}</span>
                <span class="color-price">{{ configop.price|currency:'PKR':false }}</span>
            </div>
        </div>
    </button>
</ion-list>

.ts file
    itemSelected(configop: any) {
      if(this.selection !=null){
        if(configop.name == this.selection){
          this.storage.remove('carPaint');
          this.selection=configop.name;
        }
        else {
          this.storage.remove('carPaint');
          this.storage.set('carPaint', configop);
          this.selection=configop.name;}
        }
        else { …

嗨，我需要从类型脚本文件中调用一个普通的javascript 函数。

function test(){

cosole.log('test');

}