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

Commite18301f

Browse files
committed
refactor: use Renderer2 and DOCUMENT DI instead of direct DOM manipulation
1 parentb82a4a1 commite18301f

14 files changed

+257
-130
lines changed
Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import{Component,ElementRef,Input,OnInit,OnDestroy}from'@angular/core';
2-
import{asideMenuCssClasses,Replace}from'./../shared/index';
1+
import{Component,ElementRef,Input,OnInit,OnDestroy,Inject,Renderer2}from'@angular/core';
2+
import{DOCUMENT}from'@angular/common';
3+
4+
import{asideMenuCssClasses,Replace}from'../shared';
35

46
@Component({
57
selector:'app-aside',
@@ -14,7 +16,11 @@ export class AppAsideComponent implements OnInit, OnDestroy {
1416
@Input()fixed:boolean;
1517
@Input()offCanvas:boolean;
1618

17-
constructor(privateel:ElementRef){}
19+
constructor(
20+
@Inject(DOCUMENT)privatedocument:any,
21+
privaterenderer:Renderer2,
22+
privateel:ElementRef
23+
){}
1824

1925
ngOnInit():void{
2026
Replace(this.el);
@@ -24,22 +30,25 @@ export class AppAsideComponent implements OnInit, OnDestroy {
2430
}
2531

2632
ngOnDestroy():void{
27-
document.body.classList.remove('aside-menu-fixed');
33+
this.renderer.removeClass(this.document.body,'aside-menu-fixed');
2834
}
2935

30-
isFixed(fixed:boolean):void{
31-
if(this.fixed){document.querySelector('body').classList.add('aside-menu-fixed');}
36+
isFixed(fixed:boolean=this.fixed):void{
37+
if(fixed){
38+
this.renderer.addClass(this.document.body,'aside-menu-fixed');
39+
}
3240
}
3341

34-
isOffCanvas(offCanvas:boolean):void{
35-
if(this.offCanvas){document.querySelector('body').classList.add('aside-menu-off-canvas');}
42+
isOffCanvas(offCanvas:boolean=this.offCanvas):void{
43+
if(offCanvas){
44+
this.renderer.addClass(this.document.body,'aside-menu-off-canvas');
45+
}
3646
}
3747

38-
displayBreakpoint(display:any):void{
39-
if(this.display!==false){
40-
letcssClass;
41-
this.display ?cssClass=`aside-menu-${this.display}-show` :cssClass=asideMenuCssClasses[0];
42-
document.querySelector('body').classList.add(cssClass);
48+
displayBreakpoint(display:any=this.display):void{
49+
if(display!==false){
50+
constcssClass=this.display ?`aside-menu-${this.display}-show` :asideMenuCssClasses[0];
51+
this.renderer.addClass(this.document.body,cssClass);
4352
}
4453
}
4554
}

‎projects/coreui/angular/src/lib/breadcrumb/app-breadcrumb.component.ts‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import{Component,ElementRef,Input,OnInit,OnDestroy}from'@angular/core';
2-
import{Replace}from'./../shared';
3-
import{AppBreadcrumbService}from'./app-breadcrumb.service';
1+
import{Component,ElementRef,Inject,Input,OnDestroy,OnInit,Renderer2}from'@angular/core';
2+
import{DOCUMENT}from'@angular/common';
3+
4+
import{AppBreadcrumbService}from'./app-breadcrumb.service';
5+
import{Replace}from'../shared';
46

57
@Component({
68
selector:'app-breadcrumb',
@@ -19,7 +21,12 @@ export class AppBreadcrumbComponent implements OnInit, OnDestroy {
1921
@Input()fixed:boolean;
2022
publicbreadcrumbs;
2123

22-
constructor(publicservice:AppBreadcrumbService,publicel:ElementRef){}
24+
constructor(
25+
@Inject(DOCUMENT)privatedocument:any,
26+
privaterenderer:Renderer2,
27+
publicservice:AppBreadcrumbService,
28+
publicel:ElementRef
29+
){}
2330

2431
publicngOnInit():void{
2532
Replace(this.el);
@@ -28,10 +35,12 @@ export class AppBreadcrumbComponent implements OnInit, OnDestroy {
2835
}
2936

3037
ngOnDestroy():void{
31-
document.body.classList.remove('breadcrumb-fixed');
38+
this.renderer.removeClass(this.document.body,'breadcrumb-fixed');
3239
}
3340

34-
isFixed(fixed:boolean):void{
35-
if(this.fixed){document.querySelector('body').classList.add('breadcrumb-fixed');}
41+
isFixed(fixed:boolean=this.fixed):void{
42+
if(fixed){
43+
this.renderer.addClass(this.document.body,'breadcrumb-fixed');
44+
}
3645
}
3746
}
Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
1-
import{Injectable,Injector}from'@angular/core';
2-
import{Router,ActivatedRoute,NavigationEnd}from'@angular/router';
3-
import{BehaviorSubject,Observable}from'rxjs/index';
4-
import{filter}from'rxjs/operators';
5-
6-
@Injectable()
7-
exportclassAppBreadcrumbService{
8-
9-
breadcrumbs:Observable<Array<Object>>;
10-
11-
private_breadcrumbs:BehaviorSubject<Array<Object>>;
12-
13-
constructor(privaterouter:Router,privateroute:ActivatedRoute){
14-
15-
this._breadcrumbs=newBehaviorSubject<Object[]>(newArray<Object>());
16-
17-
this.breadcrumbs=this._breadcrumbs.asObservable();
18-
19-
this.router.events.pipe(filter(event=>eventinstanceofNavigationEnd)).subscribe((event)=>{
20-
constbreadcrumbs=[];
21-
letcurrentRoute=this.route.root,
22-
url='';
23-
do{
24-
constchildrenRoutes=currentRoute.children;
25-
currentRoute=null;
26-
// tslint:disable-next-line:no-shadowed-variable
27-
childrenRoutes.forEach(route=>{
28-
if(route.outlet==='primary'){
29-
constrouteSnapshot=route.snapshot;
30-
url+='/'+routeSnapshot.url.map(segment=>segment.path).join('/');
31-
breadcrumbs.push({
32-
label:route.snapshot.data,
33-
url:url
34-
});
35-
currentRoute=route;
36-
}
37-
});
38-
}while(currentRoute);
39-
40-
this._breadcrumbs.next(Object.assign([],breadcrumbs));
41-
42-
returnbreadcrumbs;
43-
});
44-
}
45-
}
1+
import{Injectable}from'@angular/core';
2+
import{Router,ActivatedRoute,NavigationEnd}from'@angular/router';
3+
import{BehaviorSubject,Observable}from'rxjs/index';
4+
import{filter}from'rxjs/operators';
5+
6+
@Injectable()
7+
exportclassAppBreadcrumbService{
8+
9+
breadcrumbs:Observable<Array<Object>>;
10+
11+
private_breadcrumbs:BehaviorSubject<Array<Object>>;
12+
13+
constructor(privaterouter:Router,privateroute:ActivatedRoute){
14+
15+
this._breadcrumbs=newBehaviorSubject<Object[]>(newArray<Object>());
16+
17+
this.breadcrumbs=this._breadcrumbs.asObservable();
18+
19+
this.router.events.pipe(filter(event=>eventinstanceofNavigationEnd)).subscribe((event)=>{
20+
constbreadcrumbs=[];
21+
letcurrentRoute=this.route.root,
22+
url='';
23+
do{
24+
constchildrenRoutes=currentRoute.children;
25+
currentRoute=null;
26+
// tslint:disable-next-line:no-shadowed-variable
27+
childrenRoutes.forEach(route=>{
28+
if(route.outlet==='primary'){
29+
constrouteSnapshot=route.snapshot;
30+
url+='/'+routeSnapshot.url.map(segment=>segment.path).join('/');
31+
breadcrumbs.push({
32+
label:route.snapshot.data,
33+
url:url
34+
});
35+
currentRoute=route;
36+
}
37+
});
38+
}while(currentRoute);
39+
40+
this._breadcrumbs.next(Object.assign([],breadcrumbs));
41+
42+
returnbreadcrumbs;
43+
});
44+
}
45+
}
Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import{Component,ElementRef,Input,OnInit,OnDestroy}from'@angular/core';
2-
import{Replace}from'./../shared';
1+
import{Component,ElementRef,Inject,Input,OnDestroy,OnInit,Renderer2}from'@angular/core';
2+
import{DOCUMENT}from'@angular/common';
3+
4+
import{Replace}from'../shared';
35

46
@Component({
57
selector:'app-footer',
68
template:`
9+
<ng-container class="app-footer"></ng-container>
710
<footer class="app-footer">
811
<ng-content></ng-content>
912
</footer>
@@ -12,18 +15,24 @@ import { Replace } from './../shared';
1215
exportclassAppFooterComponentimplementsOnInit,OnDestroy{
1316
@Input()fixed:boolean;
1417

15-
constructor(privateel:ElementRef){}
18+
constructor(
19+
@Inject(DOCUMENT)privatedocument:any,
20+
privaterenderer:Renderer2,
21+
privateel:ElementRef
22+
){}
1623

1724
ngOnInit():void{
1825
Replace(this.el);
1926
this.isFixed(this.fixed);
2027
}
2128

2229
ngOnDestroy():void{
23-
document.body.classList.remove('footer-fixed');
30+
this.renderer.removeClass(this.document.body,'footer-fixed');
2431
}
2532

26-
isFixed(fixed:boolean):void{
27-
if(this.fixed){document.querySelector('body').classList.add('footer-fixed');}
33+
isFixed(fixed:boolean=this.fixed):void{
34+
if(fixed){
35+
this.renderer.addClass(this.document.body,'footer-fixed');
36+
}
2837
}
2938
}

‎projects/coreui/angular/src/lib/header/app-header.component.ts‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import{Component,ElementRef,Input,OnInit,OnDestroy}from'@angular/core';
2-
import{Replace}from'./../shared';
1+
import{Component,ElementRef,Input,OnInit,OnDestroy,Inject,Renderer2}from'@angular/core';
2+
import{DOCUMENT}from'@angular/common';
3+
4+
import{Replace}from'../shared';
35

46
@Component({
57
selector:'app-header',
@@ -73,7 +75,11 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
7375

7476
navbarBrandImg:boolean;
7577

76-
constructor(privateel:ElementRef){}
78+
constructor(
79+
@Inject(DOCUMENT)privatedocument:any,
80+
privaterenderer:Renderer2,
81+
privateel:ElementRef
82+
){}
7783

7884
ngOnInit():void{
7985
Replace(this.el);
@@ -82,11 +88,13 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
8288
}
8389

8490
ngOnDestroy():void{
85-
document.body.classList.remove('header-fixed');
91+
this.renderer.removeClass(this.document.body,'header-fixed');
8692
}
8793

88-
isFixed(fixed:boolean):void{
89-
if(this.fixed){document.querySelector('body').classList.add('header-fixed');}
94+
isFixed(fixed:boolean=this.fixed):void{
95+
if(fixed){
96+
this.renderer.addClass(this.document.body,'header-fixed');
97+
}
9098
}
9199

92100
imgSrc(brand:any):void{

0 commit comments

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