标签: angular2-components

我试图在角度4中创建一个组件,并遇到一个我似乎无法解决的非常奇怪的问题.

我有一个简单boolean的尝试基于a设置@Input

@Input('type') inputType: string = 'text';
showTextInput: boolean = false;
...
 ngAfterViewInit() {
    console.log('input', this.inputType);
    this.showTextInput = this.inputType === 'text' ? true : false;
    console.log('after condition', this.showTextInput);
}

这个组件的html是

<ts-input-item formControlName="name" 
               [control]="programForm.controls.name" 
               [label]="'Name'" 
               (onUpdateClicked)="updateItem($event,'Name','name')"> 
</ts-input-item>

所以在它当前的形式中它应该默认为类型text,它有点做,这是我变得非常困惑.下面是console.log印刷品.

所以现在this.showTextInput等于true.但是,如果我然后在组件中使用它,就像这样

  <ion-input #input 
             [type]="inputType" 
             [disabled]="isSelect"
             (keyup)="itemValueChanged(input.value)" 
             (keyup.enter)="itemUpdate()"
             *ngIf="showTextInput">
  </ion-input>

然后组件完全断开.主要是因为它没有显示,因为父组件不处理传递的表单名称,但简单地说,如果我甚至添加像

<div *ngIf="showTextInput"> foobar </div>

该foobar文本将无法显示,没有任何错误.我在正确的生命周期钩子中处理传递吗？

在这里,我有以下组件MyStoreComponent

 export class MyStoreComponent {
    stores: any[] = [{
        storeId: "456392",
        location: "New York",
        people: [{
            manager: "John",
            sales: "Claudia",
            tech: "Marcel"
        }, {
            manager: "Martin",
            sales: "Jenn",
            tech: "Oliver"
        }]
        }, {
        storeId: "456393",
        location: "California",
        people: [{
            manager: "Kim",
            sales: "Nancy",
            tech: "Marie"
        }]
    }];

 }

现在我想要统计每个分支内部的人员.例如456392有两个经理或456393只有一个

我试过自己

 <ul *ngFor="#store of stores">
    <li *ngFor="#person of store.people">
        <span *ngIf="person.length > 1">Show this</span>
    </li>
 </ul>

但是我在某些方面输了,有什么帮助吗？请？

我想为点击的每个元素运行一个函数.这是目前的情况:

<!-- This is the parent-component -->
<template ngFor let-myData [ngForOf]="someData"> 
    <tr [item]="myData" (click)="toggleActive($event)" child-component>
</template>

子组件看起来像这样:

<td>{{ item.data1 }}</td>
<td>{{ item.data2 }}</td>
<td>{{ item.data3 }}</td>

每次单击时tr,我都希望在toggleActive我单击的子组件中触发-function.目前它在父组件中触发.我怎么能按照我想要的方式完成这项工作？

我想在ionic2中尝试beta11到rc0.

我的一个页面有自定义标签作为peg 更改日志我试图更新我的自定义标签和页面按照第7点解释

将每个自定义组件和管道导入并添加到src/app/app.module.ts中的声明数组中.

我已将componentTags.ts文件移至src并查看了我的文件 @NgModel

@NgModule({
  declarations: [
    MyApp,
    LoginPage,
    HomePage,
    AboutUsPage,
    PrivacyPolicyPage,
    TermsOfUsePage,
    ProductSubCategoryPage,
    CategoryProductDetailsPage,
    CategoryProductDetailsInfoPage,

    //custom tags
    QuantityComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage,
    HomePage,
    AboutUsPage,
    PrivacyPolicyPage,
    TermsOfUsePage,
    ProductSubCategoryPage,
    CategoryProductDetailsPage,
    CategoryProductDetailsInfoPage,

    QuantityComponent
  ],
  //directives: [QuantityComponent],
  providers: [
    Products,
    Users,
    Configurator,
    Rest
  ]

所以这是我的自定义组件文件,名为quantityTag.ts文件

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
    selector: 'counter',

    styles: [`

        .quantity-input {
            display:flex; align-items:center;
        }
        .quantity-input .input-width {
            width:50px;
            border: 1px solid #bdbdbd;
            padding-top: 5px;

        } …

我正在尝试从父组件调用子组件的函数。

据我了解，最好的方法是使用 ViewChild。

我理解这一切的逻辑，但由于某种原因我无法将子组件导入父组件，它给了我错误：

找不到模块“../claim-header/claim-header.component”。

这是我的父组件中的导入部分：（声明）

import { ClaimHeaderComponent } from '../claim-header/claim-header.component';

我都试过了：

import { ClaimHeaderComponent } from './claim-header';
import { ClaimHeaderComponent } from './claim-header/claim-header';
import { ClaimHeaderComponent } from '../claim-header';
import { ClaimHeaderComponent } from '../../components/claim-header-component';

等等。

作为参考，其余的导入工作正常，只要它们不是组件：

import { ClaimDetail } from '../../modules/models/claim';
import { ClaimsService } from '../../modules/services/claims.service';

这是我的子组件的声明：

@Component({
    moduleId: module.id,
    selector: 'fhp-claim-header',
    templateUrl: 'claim-header.component.html'
})

export class ClaimHeaderComponent implements OnInit {
   ...
}

我的文件夹布局：

文件夹布局

我想在文本框的输入更改时调用类型脚本函数，它对我有用。但是它会在每次更改时调用，我想在文本框中的最小字符数为5时调用。

export class StudentMaintenanceComponent implements OnInit {
    @Component({
        selector: 'app-student-management',
        template: `<input placeholder="" class="form-control" type="text" [maxlength]="5" (input)="SearchData($event.target.value)">`,
        styleUrls: ['./app-student-management.css']
    })

    SearchData(_no: string) { // should be called when minimum no of character are 5 in the text field.
        console.log(_no);
    }
}

我有一个带有多个复选框、下拉菜单和一个保存按钮的组件。这是一个简化的示例组件模板：

<aside class="container">
  <div class="row">
    <input
      type="checkbox"
      id="all-users"
      [(ngModel)]="showAllUsers"
      (ngModelChange)="onChange($event)"
    />
    <label for="all-users">Show all users</label>
  </div>
  <div class="row">
    <ng-select
      [(ngModel)]="selectedUser"
      [clearable]="false"
      appendTo="body"
      (change)="onChange($event)"
    >
      <ng-option *ngFor="let user of activeUsers" [value]="user">{{ user }}</ng-option>
    </ng-select>
  </div>
  <div class="row">
    <button type="button" class="btn btn-primary" [disabled]="!dirty" (click)="onSave()">
      Save Changes
    </button>
  </div>
</aside>

我想Save Changes仅在用户进行更改时启用该按钮，无论是通过取消选中复选框还是更改下拉框中的选择。

现在，我在组件中的每个控件（onChange上例中的函数）上注册了一个事件处理程序，并使用一个dirty标志来禁用或启用Save Changes按钮。

这是上述模板的 component.ts：

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

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent implements …

我目前正在学习 angular 并在很长一段时间内开发一个小型应用程序。我的应用程序包含多个组件，其中一些允许使用执行一些 crud 操作。但是，我面临着一个我已经好几天都无法解决的问题。

该应用程序将数据分类为用户可以更新的不同类别。但是当用户更新一个组件中的数据然后导航到另一个组件时。用户导航到的组件不知道更新，因此不会刷新。我知道我可以使用 window.location.reload() 来重新加载整个应用程序，但我认为在每次更新时重新加载应用程序首先违背了构建 SPA 的目的。

有没有办法在更新另一个组件的数据后刷新组件？

我很抱歉我的新手问题，我正在尝试使用@Output EventEmitter. 我无法在我的父组件中捕获事件。

子组件

@Component({
  selector: 'app-new-attachment',
  templateUrl: './new-attachment.component.html',
  styleUrls: ['./new-attachment.component.css']
})
class NewAttachmentComponent {
  @Input('attachment') attachment: any;
  @Output() doneEditingAttachment:EventEmitter<boolean> = new EventEmitter<boolean>();

  submit() {
    console.log('done editing child');
    this.doneEditingAttachment.emit(true);
  }
}

父组件

@Component({
  selector: 'app-new-article',
  templateUrl: './new-article.component.html',
  styleUrls: ['./new-article.component.css']
})
class NewArticleComponent {
   newAttachment: any = {};
   doneEditingAttachment($event) {
     console.log('done editing parent ', $event);
   }
}

我希望有

完成编辑孩子

而一个

完成编辑父项

但我只完成了编辑孩子

我有一个看起来像这样的子组件

子组件

@Component({
   selector: 'child-component',
   //TemplateUrl, Styles and Providers
})

export Class ChildComponent implements OnInit{
  @Input()
  arrayToGet; //An array that I want to pass from Parent to child

  ngOnInit(){
     console.log('The Array I got is ', this.arrayToGet); //Undefined, Tried even with setTimeout
  }

  //A bunch of methods to work with the array I get
}

父组件

@Component({
   selector: 'parent-component',
   template: '<div>
                <child-component [arrayToGet]="models"></child-component>
              </div>',
   //A bunch of Styles and Providers
})

export class ParentComponent{
   models;

   constructor(......){}

   ngOnInit(){
      //Get an array from …