Angular2(ベータ6)には、メインメニューのコンポーネントがあります。
<mainmenu></mainmenu>
ブール値をワイドまたはナローにバインドしたい。だから私はこれにそれを作りました:
<mainmenu [(menuvisible)]="true"></mainmenu>
しかし、私が望むのは(私が思うに)javascriptクラスプロパティにバインドすることです(他にもバインドすることがありますが、コンポーネントで単一のクラスを使用することで整頓したいので)。
エラーが発生します
例外:テンプレート解析エラー:無効なプロパティ名 'menumodel.visible'( "
] [(menumodel.visible)] = "menumodel.visible">
クラスの代わりに単一の変数で同じことをしようとすると、次のようになります:
テンプレート解析エラー:パーサーエラー:予期しないトークン '='
しかし、これ(一方向のバインディング?)は機能するようです(ただし、メニューをトリガーして別のコンポーネントからワイド/ナローに移動したいので、これは双方向のデータバインドプロパティであると感じました):
<menu [vis]="true"></menu>
これは私のメニューコンポーネントの一部です。
@Component({
selector: 'menu',
templateUrl: './app/menu.html',
providers: [HTTP_PROVIDERS, ApplicationService],
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgForm]
})
export class MenuComponent implements OnInit {
mainmenu: MainMenuVM;
constructor(private _applicationService: ApplicationService) {
this.mainmenu = new MainMenuVM();
}
// ...ngOnInit, various functions
}
これが私のMainMenu View Modelクラスです
export class MainMenuVM {
public visible: boolean;
constructor(
) { this.visible = true; }
}
私はアイコンとテキストを含むメニューを作成しようとしていますが、アイコンを表示するために狭くすることができます。このイベントを親コンポーネントに上向きに発行して、メニューの隣のコンテナの位置を変更します。コンテンツコンテナーを最大化してトリガーすると、メニューが狭くなります。これが最善の方法とは言いませんが、深くなる前にこの特定の質問を解決したいと思います。
注:ここでは入力コントロールにデータバインドしていません。コンポーネントにデータバインドしているだけなので、UIを変更できます。
これはAngular cheatsheet
<my-cmp [(title)]="name">
Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">
前もって感謝します!
[〜#〜] update [〜#〜]
受け入れられた答えからコードを統合し、ここで最終的な作業コードに私の特定のユースケースに適応します:
app.html
...header html content
// This is what I started with
<!--<menu [menuvisible]="true" (menuvisibleChange)="menuvisible=$event"></menu>-->
// This is two way data binding
// 1. Banana-in-a-box is the input parameter
// 2. Banana-in-a-box is also the output parameter name (Angular appends it's usage with Change in code - to follow shortly)
// 3. Banana-in-a-box is the short hand way to declare the commented out code
// 4. First parameter (BIAB) refers to the child component, the second refers the variable it will store the result into.
// 5. If you just need an input use the remmed out code with just the first attribute / value
<menu [(menuvisible)]="menuvisible"></menu>
.. div content start
<router-outlet></router-outlet>
.. div content end
app.component.ts(root)
export class AppComponent implements OnInit{
menuvisible: Boolean;
}
menu.component.ts(ルートの子)
export class MenuComponent implements OnInit {
// Parameters - notice the appending of "Change"
@Input() menuvisible: boolean;
@Output() menuvisibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
// Init
ngOnInit() {
// Populate menu - fetch application list
this.getApplications();
// Initially we want to show/hide the menu depending on the input parameter
(this.menuvisible === true) ? this.showMenu() : this.hideMenu();
}
//...more code
}
menu.html
<div id="menu" [ngClass]="menuStateClass" style="position: absolute; top:0px; left: 0px;z-index: 800; height: 100%; color: #fff; background-color: #282d32">
<div style="margin-top: 35px; padding: 5px 0px 5px 0px;">
<ul class="menuList" style="overflow-x: hidden;">
<li>IsMenuVisible:{{menuvisible}}</li>
<li style="border-bottom: 1px solid #3d4247"><a (click)="toggleMenu()"><i class="fa fa-bars menuIcon" style="color: white; font-size: 16px;"></i></a></li>
<li *ngFor="#app of applications">
<a [routerLink]="[app.routerLink]">
<i class="menuIcon" [ngClass]="app.icon" [style.color]="app.iconColour" style="color: white;"></i>
<span [hidden]="menuStateTextHidden">{{ app.name }}</span>
</a>
</li>
</ul>
</div>
</div>
必要なものを忘れずにインポートしてください。
import {Component、EventEmitter、OnInit、Input、Output} from 'angular2/core';
You Tubeでこのビデオを強くお勧めします: Angular 2 Tutorial(2016)-Inputs and Outputs
双方向バインディングには、次のようなものが必要です。
@Component({
selector: 'menu',
template: `
<button (click)="menuvisible = !menuvisible; menuvisibleChange.emit(menuvisible)">toggle</button>
<!-- or
<button (click)="toggleVisible()">toggle</button> -->
`,
// HTTP_PROVIDERS should now be imports: [HttpModule] in @NgModule()
providers: [/*HTTP_PROVIDERS*/, ApplicationService],
// This should now be added to declarations and imports in @NgModule()
// imports: [RouterModule, CommonModule, FormsModule]
directives: [/*ROUTER_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgForm*/]
})
export class MenuComponent implements OnInit {
@Input() menuvisible:boolean;
@Output() menuvisibleChange:EventEmitter<boolean> = new EventEmitter<boolean>();
// toggleVisible() {
// this.menuvisible = !this.menuvisible;
// this.menuvisibleChange.emit(this.menuvisible);
// }
}
そして、それを次のように使用します
@Component({
selector: 'some-component',
template: `
<menu [(menuvisible)]="menuVisibleInParent"></menu>
<div>visible: {{menuVisibleInParent}}</div>
`
directives: [MenuComponent]
})
class SomeComponent {
menuVisibleInParent: boolean;
}
短いプランカーを作成しました。
ngModel Like Two-Way-Databinding for components
コンポーネントの双方向データバインディングを作成するには、少なくとも2つの可能性があります。
V1:ngModel Like Syntaxを使用すると、@ Inputプロパティ+ @Outputプロパティ名の最後にある「変更」と同じ名前の行で@Outputプロパティを作成する必要があります。
@Input() name : string;
@Output() nameChange = new EventEmitter<string>();
v1では、ngModel構文で子コンポーネントにバインドできるようになりました
[(name)]="firstname"
V2。好みの名前を付けて1つの@Inputおよび@Outputプロパティを作成するだけです
@Input() age : string;
@Output() ageChanged = new EventEmitter<string>();
v2では、2方向のデータバインディングを取得するために2つの属性を作成する必要があります
[age]="alter" (ageChanged)="alter = $event"
親コンポーネント
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<p>V1 Parentvalue Name: "{{firstname}}"<br/><input [(ngModel)]="firstname" > <br/><br/>
V2 Parentvalue Age: "{{alter}}" <br/><input [(ngModel)]="alter"> <br/><br/>
<my-child [(name)]="firstname" [age]="alter" (ageChanged)="alter = $event"></my-child></p>`
})
export class AppComponent {
firstname = 'Angular';
alter = "18";
}
子コンポーネント
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'my-child',
template: `<p>V1 Childvalue Name: "{{name}}"<br/><input [(ngModel)]="name" (keyup)="onNameChanged()"> <br/><br/>
<p>V2 Childvalue Age: "{{age}}"<br/><input [(ngModel)]="age" (keyup)="onAgeChanged()"> <br/></p>`
})
export class ChildComponent {
@Input() name : string;
@Output() nameChange = new EventEmitter<string>();
@Input() age : string;
@Output() ageChanged = new EventEmitter<string>();
public onNameChanged() {
this.nameChange.emit(this.name);
}
public onAgeChanged() {
this.ageChanged.emit(this.age);
}
}