Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1fc7fea

Browse files
committed
refactor: move more to signals
1 parentbb3de48 commit1fc7fea

File tree

7 files changed

+41
-47
lines changed

7 files changed

+41
-47
lines changed

‎src/app/examples/access-from-class/access-from-class.component.ts‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
1-
import{
2-
AfterViewInit,
3-
ChangeDetectionStrategy,
4-
Component,
5-
HostBinding,
6-
QueryList,
7-
ViewChild,
8-
ViewChildren,
9-
}from'@angular/core'
1+
import{AfterViewInit,ChangeDetectionStrategy,Component,HostBinding,viewChild,viewChildren}from'@angular/core'
102
import{SplitAreaComponent,SplitComponent,SplitDir,SplitDirection}from'angular-split'
113

124
import{ExampleTitleComponent}from'src/app/ui/components/exampleTitle.component'
@@ -98,15 +90,15 @@ import { AComponent } from '../../ui/components/AComponent'
9890
exportclassAccessFromClassComponentextendsAComponentimplementsAfterViewInit{
9991
@HostBinding('class')class='split-example-page'
10092

101-
@ViewChild(SplitComponent)splitEl:SplitComponent
102-
@ViewChildren(SplitAreaComponent)areasEl:QueryList<SplitAreaComponent>
93+
readonlysplitEl=viewChild(SplitComponent)
94+
readonlyareasEl=viewChildren(SplitAreaComponent)
10395

10496
direction:SplitDirection='horizontal'
10597
disabled=false
10698
dir:SplitDir='ltr'
10799
gutterSize=11
108100

109101
ngAfterViewInit(){
110-
console.log('Area Components: ',this.areasEl)
102+
console.log('Area Components: ',this.areasEl())
111103
}
112104
}

‎src/app/examples/geek-demo/geek-demo.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{ChangeDetectionStrategy,Component,HostBinding,ViewChild}from'@angular/core'
1+
import{ChangeDetectionStrategy,Component,HostBinding,viewChild}from'@angular/core'
22
import{FormsModule}from'@angular/forms'
33
import{SplitAreaComponent,SplitAreaSize,SplitComponent,SplitDirection}from'angular-split'
44
import{ButtonRadioDirective}from'ngx-bootstrap/buttons'
@@ -188,7 +188,7 @@ import { AComponent } from '../../ui/components/AComponent'
188188
`,
189189
})
190190
exportclassGeekDemoComponentextendsAComponent{
191-
@ViewChild(SortableComponent)sortableComponent:SortableComponent
191+
readonlysortableComponent=viewChild(SortableComponent)
192192
@HostBinding('class')class='split-example-page'
193193

194194
d:{
@@ -229,14 +229,14 @@ export class GeekDemoComponent extends AComponent {
229229
})
230230
this.alignAreaSizes()
231231

232-
this.sortableComponent.writeValue(this.d.areas)
232+
this.sortableComponent().writeValue(this.d.areas)
233233
}
234234

235235
removeArea(area:{id:number;color:string;size:SplitAreaSize;present:boolean;visible:boolean}){
236236
this.d.areas.splice(this.d.areas.indexOf(area),1)
237237
this.alignAreaSizes()
238238

239-
this.sortableComponent.writeValue(this.d.areas)
239+
this.sortableComponent().writeValue(this.d.areas)
240240
}
241241

242242
hideArea(area:{id:number;color:string;size:SplitAreaSize;present:boolean;visible:boolean}){

‎src/app/examples/global-options/global-options.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{ChangeDetectionStrategy,Component,HostBinding,ViewChild}from'@angular/core'
1+
import{ChangeDetectionStrategy,Component,HostBinding,viewChild}from'@angular/core'
22
import{SplitAreaComponent,SplitComponent}from'angular-split'
33
import{ExampleTitleComponent}from'src/app/ui/components/exampleTitle.component'
44
import{AComponent}from'../../ui/components/AComponent'
@@ -43,17 +43,17 @@ import { AComponent } from '../../ui/components/AComponent'
4343
exportclassGlobalOptionsComponentextendsAComponent{
4444
@HostBinding('class')class='split-example-page'
4545

46-
@ViewChild('split')split:SplitComponent
47-
@ViewChild('area1')area1:SplitAreaComponent
48-
@ViewChild('area2')area2:SplitAreaComponent
46+
readonlysplit=viewChild<SplitComponent>('split')
47+
readonlyarea1=viewChild<SplitAreaComponent>('area1')
48+
readonlyarea2=viewChild<SplitAreaComponent>('area2')
4949

5050
constructor(){
5151
super()
5252

5353
setTimeout(()=>{
54-
console.log('>>> split > ',this.split)
55-
console.log('>>> area1 > ',this.area1)
56-
console.log('>>> area2 > ',this.area2)
54+
console.log('>>> split > ',this.split())
55+
console.log('>>> area1 > ',this.area1())
56+
console.log('>>> area2 > ',this.area2())
5757
},1000)
5858
}
5959
}

‎src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
ElementRef,
77
HostBinding,
88
OnDestroy,
9-
ViewChild,
9+
viewChild,
1010
}from'@angular/core'
1111
import{SplitAreaSize,SplitComponent,SplitGutterInteractionEvent,SplitAreaComponent}from'angular-split'
1212
import{Subscription}from'rxjs'
@@ -134,11 +134,11 @@ export class GutterClickRollUnrollComponent extends AComponent implements AfterV
134134
]
135135
sub:Subscription
136136

137-
@ViewChild('mySplit')mySplitEl:SplitComponent
138-
@ViewChild('logs')logsEl:ElementRef
137+
readonlymySplitEl=viewChild<SplitComponent>('mySplit')
138+
readonlylogsEl=viewChild<ElementRef>('logs')
139139

140140
ngAfterViewInit(){
141-
this.sub=this.mySplitEl.dragProgress$.subscribe((data)=>{
141+
this.sub=this.mySplitEl().dragProgress$.subscribe((data)=>{
142142
console.log(
143143
`${formatDate(
144144
newDate(),
@@ -156,8 +156,9 @@ export class GutterClickRollUnrollComponent extends AComponent implements AfterV
156156
this.logMessages.push({ type,text:`${formatDate(newDate())} >${type} event >${JSON.stringify(e)}`})
157157

158158
setTimeout(()=>{
159-
if(this.logsEl.nativeElement.scroll){
160-
(<HTMLElement>this.logsEl.nativeElement).scroll({top:this.logMessages.length*30})
159+
constlogsEl=this.logsEl()
160+
if(logsEl.nativeElement.scroll){
161+
(<HTMLElement>logsEl.nativeElement).scroll({top:this.logMessages.length*30})
161162
}
162163
})
163164

‎src/app/examples/simple-split/simple-split.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import{ChangeDetectionStrategy,Component,HostBinding,ViewChild}from'@angular/core'
1+
import{ChangeDetectionStrategy,Component,HostBinding,viewChild}from'@angular/core'
22
import{SplitAreaComponent,SplitComponent,SplitDirection}from'angular-split'
33
import{ExampleTitleComponent}from'src/app/ui/components/exampleTitle.component'
44
import{AComponent}from'../../ui/components/AComponent'
@@ -163,9 +163,9 @@ import { AComponent } from '../../ui/components/AComponent'
163163
`,
164164
})
165165
exportclassSimpleSplitComponentextendsAComponent{
166-
@ViewChild('split')split:SplitComponent
167-
@ViewChild('area1')area1:SplitAreaComponent
168-
@ViewChild('area2')area2:SplitAreaComponent
166+
readonlysplit=viewChild<SplitComponent>('split')
167+
readonlyarea1=viewChild<SplitAreaComponent>('area1')
168+
readonlyarea2=viewChild<SplitAreaComponent>('area2')
169169
@HostBinding('class')class='split-example-page'
170170

171171
direction:SplitDirection='horizontal'
@@ -190,9 +190,9 @@ export class SimpleSplitComponent extends AComponent {
190190
super()
191191

192192
setTimeout(()=>{
193-
console.log('>>> split > ',this.split)
194-
console.log('>>> area1 > ',this.area1)
195-
console.log('>>> area2 > ',this.area2)
193+
console.log('>>> split > ',this.split())
194+
console.log('>>> area1 > ',this.area1())
195+
console.log('>>> area2 > ',this.area2())
196196
},1000)
197197
}
198198

‎src/app/examples/split-transitions/split-transitions.component.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import{NgClass}from'@angular/common'
2-
import{ChangeDetectionStrategy,Component,ElementRef,HostBinding,ViewChild}from'@angular/core'
2+
import{ChangeDetectionStrategy,Component,ElementRef,HostBinding,viewChild}from'@angular/core'
33
import{SplitAreaSize,SplitComponent}from'angular-split'
44
import{SplitAreaComponent}from'projects/angular-split/src/public_api'
55
import{ExampleTitleComponent}from'src/app/ui/components/exampleTitle.component'
@@ -260,14 +260,15 @@ export class SplitTransitionsComponent extends AComponent {
260260
}
261261
logMessages:Array<{type:string;text:string}>=[]
262262

263-
@ViewChild('logs')logsEl:ElementRef
263+
readonlylogsEl=viewChild<ElementRef>('logs')
264264
@HostBinding('class')class='split-example-page'
265265

266266
log(e){
267267
this.logMessages.push({type:'transitionEnd',text:`${formatDate(newDate())} > transitionEnd event >${e}`})
268268
setTimeout(()=>{
269-
if(this.logsEl.nativeElement.scroll){
270-
(<HTMLElement>this.logsEl.nativeElement).scroll({top:this.logMessages.length*30})
269+
constlogsEl=this.logsEl()
270+
if(logsEl.nativeElement.scroll){
271+
(<HTMLElement>logsEl.nativeElement).scroll({top:this.logMessages.length*30})
271272
}
272273
})
273274
}

‎src/app/examples/sync-split/sync-split.component.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import{
22
Component,
33
ChangeDetectionStrategy,
4-
ViewChild,
54
AfterViewInit,
65
OnDestroy,
76
HostBinding,
87
inject,
98
ChangeDetectorRef,
109
signal,
10+
viewChild,
1111
}from'@angular/core'
1212
import{Subscription,merge}from'rxjs'
1313
import{SplitAreaComponent,SplitAreaSize,SplitComponent}from'angular-split'
@@ -54,19 +54,19 @@ import { ExampleTitleComponent } from 'src/app/ui/components/exampleTitle.compon
5454
})
5555
exportclassSyncSplitComponentextendsAComponentimplementsAfterViewInit,OnDestroy{
5656
privatez=inject(ChangeDetectorRef)
57-
@ViewChild('mySplitA')mySplitAEl:SplitComponent
58-
@ViewChild('mySplitB')mySplitBEl:SplitComponent
59-
@ViewChild('mySplitC')mySplitCEl:SplitComponent
57+
readonlymySplitAEl=viewChild<SplitComponent>('mySplitA')
58+
readonlymySplitBEl=viewChild<SplitComponent>('mySplitB')
59+
readonlymySplitCEl=viewChild<SplitComponent>('mySplitC')
6060
@HostBinding('class')class='split-example-page'
6161

6262
sizes=signal<SplitAreaSize[]>([25,75])
6363
sub:Subscription
6464

6565
ngAfterViewInit(){
6666
this.sub=merge(
67-
this.mySplitAEl.dragProgress$,
68-
this.mySplitBEl.dragProgress$,
69-
this.mySplitCEl.dragProgress$,
67+
this.mySplitAEl().dragProgress$,
68+
this.mySplitBEl().dragProgress$,
69+
this.mySplitCEl().dragProgress$,
7070
).subscribe((t)=>{
7171
this.sizes.set(t.sizes)
7272
})

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp