小编Bün*_*gül的帖子

输入更改时的Angular2调用函数

子组件:

export class Child {
    @Input() public value: string;
    public childFunction(){...}
}
Run Code Online (Sandbox Code Playgroud)

父组件:

export class Parent {
    public value2: string;
    function1(){ value2 = "a" }
    function2(){ value2 = "b" }
}
Run Code Online (Sandbox Code Playgroud)

家长观点:

<child [value]="value2">
Run Code Online (Sandbox Code Playgroud)

每次在这个结构中更改value2时,有没有办法调用childFunction()?

javascript data-binding angular

21
推荐指数
1
解决办法
2万
查看次数

组件内的Angular2 Html

我想创建一个像模板一样的组件.例如,而不是在任何地方写这个:

<div class="myClass">
    <div class="myHeader" id="headerId"> Title </div>
    <div class="myContent" id="contentId"> <<Some HTML code>> </div>
</div>
Run Code Online (Sandbox Code Playgroud)

我想使用像这样的组件:

<my-component title="Title" headerID=headerId contentID=contentID>
    <<Some HTML code>>
</my-component>
Run Code Online (Sandbox Code Playgroud)

我如何在Angular2中实现类似的东西?

html javascript angular

16
推荐指数
1
解决办法
8176
查看次数

实现CSS - Sidenav覆盖覆盖所有页面

我正在使用Materialise css,我想在中小屏幕中将导航栏变为sidenav.我就像在文档中那样做了.问题是,当我单击菜单按钮时,sidenav会打开,但它就像下面的图像

sidenav

我无法点击sidenav中的链接,因为sidenav-overlay覆盖了所有页面甚至sidenav本身.当我尝试点击链接时它正在关闭.有什么建议怎么解决?

HTML:

<div class="navbar-fixed">
    <nav class="">
        <div class="nav-wrapper red lighten-1">
            <div class="container-fluid">
                <a href="#!" class="brand-logo">
                    <img src="img/logo.png">
                </a>
                <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">How It Works?</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">More</a></li>
                    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
                </ul>
                <ul class="side-nav" id="mobile-sidenav">
                    <li><a href="#">How It Works?</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">More</a></li>
                    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
Run Code Online (Sandbox Code Playgroud)

我意识到导航栏固定有z-index997(sidenav-overlay也是997),我认为这可能会导致问题.然而,侧导航有固定的定位和z-index999.即使它有固定位置,它是否依赖于它的父母?

编辑:我可以通过更改leftsidenav-overlay 的属性来解决它,但我不想手动设置它.我正在寻找另一种解决方案.

html css jquery materialize

16
推荐指数
1
解决办法
4196
查看次数

Angular2 - 未在同一模块中声明时指令不起作用

我有一个指令,我想在多个模块中使用它.在每个模块上声明它会产生错误.因此,我尝试在共享模块中声明它并将此共享模块导入其他模块.但是,它没有用.它仅在组件自己的模块上准确声明时才有效.

这是我的SharedModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GeneralDataService } from './general-data.service';
import {ModalDirective} from '../directives/modal.directive';

    @NgModule({
      imports: [
        CommonModule
      ],
      providers: [GeneralDataService],
      declarations: [ModalDirective]
    })
    export class SharedModule { }
Run Code Online (Sandbox Code Playgroud)

我想要使​​用的模块ModalDirective:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './patient.component';
import {SharedModule} from '../shared/shared.module';
@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  providers: [  ],
  declarations: [ MyComponent ]
}) …
Run Code Online (Sandbox Code Playgroud)

angular2-directives viewchild angular2-modules angular

10
推荐指数
1
解决办法
4835
查看次数

http服务器可以处理多少个客户端?

我用Angular2作为客户端,NodeJS作为服务器构建了一个Web应用程序.我想用npm的http-server应用程序服务它而没有任何配置,但我想知道它可以同时处理多少个客户端?

client-server httpserver node.js

5
推荐指数
2
解决办法
6758
查看次数

Angular - 不纯的管道 vs 功能

我正在 Angular2 中的数组上实现过滤操作。当数组中的元素发生变化时,不会触发纯管道。因此,我必须使用不纯的管道或使用组件内部的函数进行过滤,如下所示。

*ngFor="let item of items | impureFilterPipe"
Run Code Online (Sandbox Code Playgroud)

或者,

<!-- component.html -->
*ngFor="let item of filterFunction(items)"

// component.ts
sortFunction(items) { return items.sort(); }
Run Code Online (Sandbox Code Playgroud)

据我所知,在模板中绑定函数在性能方面是不好的。但是,我看不出使用不纯管道而不是函数有什么区别。我想知道的是,上述两种方法之间的性能有什么不同吗?

data-binding angular-pipe angular angular-changedetection

5
推荐指数
1
解决办法
1111
查看次数

Angular2 + ng-bootstrap示例

我开始学习Angular2,我想在我的项目中使用ng-bootstrap.但是,我无法做一个有效的项目.导入ng-bootstrap时失败.由于我是初学者,我不知道问题是因为代码还是其他我犯了错误.

你能用ng-bootstrap和Angular2 为我提供一个工作简单的项目吗?所以我可以试着让它在我的电脑上运行吗?

编辑:

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent }  from './app.component';
import { NgbdAlertCloseable } from './ngbd-alert-closeable.component';


@NgModule({
  imports:      [ NgbModule, BrowserModule ],
  declarations: [ NgbdAlertCloseable, AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
Run Code Online (Sandbox Code Playgroud)

systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the …
Run Code Online (Sandbox Code Playgroud)

javascript twitter-bootstrap ng-bootstrap angular

4
推荐指数
1
解决办法
4182
查看次数

Angular2检查元素的类

我想访问元素的类来检查它是"崩溃"还是"崩溃".我想做的事情如下:

<span *ngIf=" class == 'collapse in' "> - </span>
<span *ngIf=" class == 'collapse'    "> + </span>
Run Code Online (Sandbox Code Playgroud)

有没有一种简单的方法来获取Angular2上的元素类?

javascript twitter-bootstrap angular

4
推荐指数
1
解决办法
4921
查看次数

类型“any[]”(JSON)上不存在 Angular2 属性

我有一个名为Condition的类:

export class Condition{
    name: string;
    date: string;
    link: string;
}
Run Code Online (Sandbox Code Playgroud)

还有一个名为search的函数,它发出 http get 请求:

public search(params: string): Observable<json[]> {
    let queryString = this.serverUrl + params;

     return this.http.get(queryString)
                     .map((res:Response) => res.json())
                     .catch((error:any) => Observable.throw(error.json().error || 'Server error'));

 } 
Run Code Online (Sandbox Code Playgroud)

我得到一个对象,从中获取具有特定属性的条件。它的入口属性中绝对有一个对象数组:

this.search(`Condition?patient=Patient/107795`).subscribe(data => {
    var conditionArray = data.entry;       // data.entry is absolutely an ARRAY
    for(var condition of conditionArray){
        conditions.push({    //conditions is a Condition[]
            name: condition.resource.code.coding[0].display,
            date: condition.resource.dateRecorded,
            link: "condition/" + condition.resource.id
        });
    }
    } , err …
Run Code Online (Sandbox Code Playgroud)

javascript rest json angular

4
推荐指数
1
解决办法
1万
查看次数

Ionic 2 - 如何在Android上使用后退按钮退出应用程序?

我用Google搜索了当按下后退按钮时如何让Ionic2应用程序退出,但是我发现完全相反的问题,例如"当按下后退按钮时如何防止退出Ionic2应用程序?".这就是我想要的,但是当我按下时它会在最近的标签之间切换.

我刚开始这个项目,ionic start --v2 myProject tabs并没有改变任何东西.

在Android设备上按下后退按钮时,如何强制退出?

android typescript ionic2

3
推荐指数
1
解决办法
8144
查看次数

Angular - 按钮上未触发Click事件

我更新后angularangular-cli,我一直面临着奇怪的问题.我有两个<div>s,我试图隐藏一个,并在点击一个按钮时显示另一个.

这是我的功能:

  ngOnInit() {
    this.goalView = this.el.nativeElement.getElementsByClassName('goal-view')[0];
    this.goalEdit = this.el.nativeElement.getElementsByClassName('goal-edit')[0];
  }

  triggerEdit(): void {
    this.goalView.style.display = 'none';
    this.goalEdit.style.display = 'block';
  }

  triggerView(save: boolean): void {
    this.goalEdit.style.display = 'none';
    this.goalView.style.display = 'block';
  }
Run Code Online (Sandbox Code Playgroud)

我的模板:

<div class="goal-view">
  ...
  <button class="ui right floated green button margin-vertical-10" (click)="triggerEdit()"><i class="ui edit icon"></i>Edit</button>
</div>
<div class="goal-edit">
  ...
  <button class="ui right floated green button margin-vertical-10"><i class="ui save icon" (click)="triggerView(true)"></i>Save</button>
</div>
Run Code Online (Sandbox Code Playgroud)

当我点击edit按钮时,它可以工作.当我点击save按钮时,它有时会起作用.但有时它没有,我应该点击30-40次按钮使其工作.我试着console.log("something")triggerView函数中,但它也是如此.有时工作,有时不工作.

我还检查event.target …

typescript angular-cli angular

0
推荐指数
1
解决办法
618
查看次数