标签: angular-components

我正在尝试用ngRoute组合我的第一个角度组件,到目前为止,我无法获得要解决的数据.配置:

.when('/myfirstcomponent', {
    template: '<myfirstcomponent claimKeys="$resolve.claimKeys"></myfirstcomponent>',
    resolve: {
        claimKeys: ['$http', function($http) {
            $http.get('server/claimkeys.json').then((response) => {
                var claimKeys = response.data.DATASET.TABLE;
                return claimKeys;
            });
        }]
    }
})

零件:

    .component('myfirstcomponent', {
        bindings: {
            'claimKeys': '@'
        },
        templateUrl: 'components/component.html',
        controller: [function() {
            this.$onInit = function() {
                var vm = this;
                console.log(vm.claimKeys);
            };


        }]

组件的html只有ap元素,其中包含一些随机文本.

我可以看到调试时我正在检索数据,但我无法在组件控制器上访问它...

编辑:感谢下面接受的答案,我解决了我的问题.它与异步调用的问题没有任何关系,但与我如何定义我的路由和组件有关.请参阅以下代码进行修复.再次感谢.

如何在Angular 2中重新加载相同的组件？

这是我的代码如下:

import { Component, OnInit, ElementRef, Renderer } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { productModel } from '../_models/index';
import { categoryListService } from '../_services/index';

@Component({
  selector: 'app-product',
  templateUrl: 'product.component.html',
  styleUrls: ['product.component.css']
})
export class productComponent implements OnInit {
  uidproduct: productModel;
  param: number;
  constructor(
    private elementRef: ElementRef,
    private route: ActivatedRoute,
    private router: Router,
    private categoryListService: categoryListService) { }

  ngOnInit() {
    this.route.params.subscribe(product => {
      console.log('logging sub product obj', product);
    });
    this.uidproduct = JSON.parse(sessionStorage.getItem('product'));
    var …

我想知道如何使用带有1.5角组件的$ formatters和$ parsers.有人可以发布一个例子.

或者是否有类似我可以使用的东西.

我有2个兄弟组件,我在一个组件中做一个http请求,如果发生特定情况,它应该发出另一个http请求,写在另一个组件中.所以我应该能够在第一个组件中调用该方法.

这是第一个组成部分:

import { Component, OnInit, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { SendCardComponent } from '../send-card/send-card.component';

@Component({
  selector: 'app-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.css'],
})

export class InputFieldComponent implements OnInit {

value = '';
output = '';
@Inject(SendCardComponent) saro: SendCardComponent;

constructor(private http : Http) { }
onEnter(value: string) { 

this.value = value;


this.http.post('http://localhost:5000/APIconversation/', {"val":value})
  .map(response=>response.json())
  .subscribe(
      data => {

            this.output = data.result.fulfillment.speech,
            if(data.result.fulfillment.speech == 'test'){
                saro.sendCard('done', '1' );   
            }               

       });

 } 

我试图从InputFieldComponent调用sendCardComponent中定义的sendCard(),如下所示:

import { Component, …

我坚持在Angular 4中创建一个可重用的组件.我有一堆报告都包含一个搜索表单(每个报告的字段不同)和一个材料表结果列表(每个报告的字段列表不同).当我为每个报告复制整个组件时,它按预期工作,但我想将其重构为可重用的组件/模板和扩展它的子组件.但范围都是错误的,我无法理解这是如何工作的.

report.component.ts(可重用组件)

import {Component, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material';

import 'rxjs/add/operator/map';

import {ReportsDataSource} from '../services/reports-datasource.service';

@Component({
    selector: 'app-report',
    templateUrl: './report.component.html',
})
export class ReportComponent {
    @ViewChild(MatPaginator) paginator: MatPaginator;

    /** result table columns */
    columns = [];

    /** Column definitions in order */
    displayedColumns = this.columns.map(x => x.columnDef);

    /** empty search parameters object, used for form field binding */

    /** datasource service */
    dataSource: ReportsDataSource;

    /** submit the form */
    getData() {
        this.dataSource.getData();
    }
}

report.component.html(可重用模板) …

我正在建立一个我总是想要endDate> startDate的组件（html，css，spec.ts，ts）。我按照此链接https://material.angular.io/components/datepicker/overview进行了多个日期选择。

以下是我针对startDate和的HTML endDate：

开始日期：

<div class="start-date" fxFlex="50%" fxFlexOrder="1">
          <mat-form-field>
            <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </div>

结束日期：

<div class="end-date" fxFlex="50%" fxFlexOrder="2">
           <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
        </div>

现在下面是我validateForm在页面加载时调用方法的角度代码（ts）。

ngOnInit() {
    ....
    this.validateForm();
}

validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
     'startDate': ['', Validators.required],
     'endDate': ['', Validators.required],
     'unavailabilityReason': ['']
    });
}

问题陈述：

现在，我需要做的是-如果我选择了某个日期 …

问题:我想每次绑定子组件的对象中的属性发生变化时都能调用一个函数.但是,即使可以看到绑定的输入属性更新,setter也只被调用一次.

这一切都来自于需要将子组件绑定到其父组件属性,该属性恰好是具有深层嵌套属性的复杂对象.我已经了解到,当对象中的嵌套属性发生更改时,Angular onChange事件不会触发.因此决定使用getter/setter.然而,正如这个问题所见,使用getter/setter也无效.我已经改变了我的子组件以订阅父组件订阅的相同Observable,从而直接从服务接收更新并绕过父组件.我已经对Angulars绑定和TypeScript getter/setter进行了大量研究,并且从各方面来看,它看起来像我的代码显示工作,但事实并非如此.

目标:了解为什么使用带有getter/setter的@Input绑定到子组件中的父组件属性不能像非主要类型那样工作.是否存在我缺少的基本概念或我的代码中是否存在实现错误？

我将在这里展示一些源代码,并为任何希望看到它实时运行的人附加StackBlitz. StackBlitz现场演示

模拟data.service.ts

@Injectable()
export class MockDataService {
  public updateSubject: Subject<any> = new Subject();
  public numObj = {
    'prop1': 'stuff',
    'prop2': 'stuff',
    'prop3': 'stuff',
    'prop4': 'stuff',
    'level1': {
      'level2': {
        'target': 0 //target is the prop that will be getting updated
      }
    }
  }
  constructor() {
    this.startDemo();
  }
  private startDemo(): void {
    //This is simulating the server sending updates
    //to the numObj
    setInterval(() => {
      this.numObj.level1.level2.target += 1;
      this.update();
    }, 4000);
  }
  private …

我目前正在研究angular 5应用程序。我尝试在视图的输入中更改组件的成员变量，并在更改后在组件中使用该变量。

我的结构如下：

文件夹：我的测试

• my-test.component.html
• my-test.component.css
• 我的test.component.ts

1）my-test.component.html：

<input [(ngModel)]="hello" />

2）my-test.component.ts：

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

@Component({
  selector: 'my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnChanges {
  hello: string = "bonjour";

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    // I'd like to log the changes of my field 'hello', 
    // once it get's changed in the input on the ui...

       console.log(changes);
  }

}

不幸的是，该解决方案不起作用。您知道如何在ui上更改组件的变量，然后在组件中使用它吗？

谢谢！！

我有这个引导标签

<ngb-tabset>
    <ngb-tab title="Tab 1">
        <ng-template ngbTabContent>
            Tab 1
        </ng-template>
    </ngb-tab>
    <ngb-tab title="Tab 2">
        <ng-template ngbTabContent>
            Tab 2
        </ng-template>
    </ngb-tab>
</ngb-tabset>

选项卡上的文本颜色为蓝色.我知道如果我创建全局样式,我可以覆盖默认值.但我想从父组件设置标签的样式

我知道我可以设置子组件的样式,但在这种情况下它不起作用(如何从父组件的css文件设置子组件的样式？).有什么建议？

styles: [
`
 :host { color: red; }

 :host ::ng-deep parent {
   color:blue;
 }
 :host ::ng-deep child{
   color:orange;
 }
 :host ::ng-deep child.class1 {
   color:yellow;
 }
 :host ::ng-deep child.class2{
   color:pink;
 }
`
],

我需要在一个组件(组件A)中设置值并在另一个组件(组件B)中接收值.组件A和组件B不是父级和子级.

我创建了一个共享服务来共享两个组件之间的数据.我能够从组件B设置值,但是当我订阅以获取组件A中的值时,它不会被触发.

这是我尝试过的:

我@NgModule providers在appmodule.ts文件中添加了Service in array,以便它可用于项目中的所有组件.

服务代码:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from '../../node_modules/rxjs';

@Injectable({
  providedIn: 'root'
})
export class SocialService {

  constructor() { }

  private valueObs: BehaviorSubject<string> = new BehaviorSubject<string>(null);

 public setValue(value: string):void {
     this.valueObs.next(value);
     this.getValue();
 }

 public getValue():Observable<string> {
     return this.valueObs;

 }

}

组件B:此处设置值

@Component({
  selector: 'app-componentb',
  templateUrl: './componentb.component.html',
  styleUrls: ['./componentb.component.scss']
})


constructor(private socialService: SocialService, private http: HttpClient) {



}

 buttonClick()
 {

    this.socialService.setValue("linked successfully");
 }

组件A: …