子组件:
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()?
我想创建一个像模板一样的组件.例如,而不是在任何地方写这个:
<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中实现类似的东西?
我正在使用Materialise css,我想在中小屏幕中将导航栏变为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 的属性来解决它,但我不想手动设置它.我正在寻找另一种解决方案.
我有一个指令,我想在多个模块中使用它.在每个模块上声明它会产生错误.因此,我尝试在共享模块中声明它并将此共享模块导入其他模块.但是,它没有用.它仅在组件自己的模块上准确声明时才有效.
这是我的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作为客户端,NodeJS作为服务器构建了一个Web应用程序.我想用npm的http-server应用程序服务它而没有任何配置,但我想知道它可以同时处理多少个客户端?
我正在 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)
据我所知,在模板中绑定函数在性能方面是不好的。但是,我看不出使用不纯管道而不是函数有什么区别。我想知道的是,上述两种方法之间的性能有什么不同吗?
我开始学习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) 我想访问元素的类来检查它是"崩溃"还是"崩溃".我想做的事情如下:
<span *ngIf=" class == 'collapse in' "> - </span>
<span *ngIf=" class == 'collapse' "> + </span>
Run Code Online (Sandbox Code Playgroud)
有没有一种简单的方法来获取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) 我用Google搜索了当按下后退按钮时如何让Ionic2应用程序退出,但是我发现完全相反的问题,例如"当按下后退按钮时如何防止退出Ionic2应用程序?".这就是我想要的,但是当我按下时它会在最近的标签之间切换.
我刚开始这个项目,ionic start --v2 myProject tabs并没有改变任何东西.
在Android设备上按下后退按钮时,如何强制退出?
我更新后angular和angular-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 …
angular ×8
javascript ×5
data-binding ×2
html ×2
typescript ×2
android ×1
angular-cli ×1
angular-pipe ×1
css ×1
httpserver ×1
ionic2 ×1
jquery ×1
json ×1
materialize ×1
ng-bootstrap ×1
node.js ×1
rest ×1
viewchild ×1