Angular 如何从角度视图中的另一个组件调用组件的ngOnit函数
我在这个组件中有一个名为“CreateBugsViewComponent”的组件,我想使用我的另一个组件的ngOnit功能,它是“ProjectBugsComponent”我如何做到这一点“CreateBugsViewComponent”的代码写在下面:Angular 如何从角度视图中的另一个组件调用组件的ngOnit函数,angular,angular-material,angular-components,ngoninit,Angular,Angular Material,Angular Components,Ngoninit,我在这个组件中有一个名为“CreateBugsViewComponent”的组件,我想使用我的另一个组件的ngOnit功能,它是“ProjectBugsComponent”我如何做到这一点“CreateBugsViewComponent”的代码写在下面: import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { FormControl
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-createbugview',
templateUrl: './createbugview.component.html',
styleUrls: ['./createbugview.component.scss']
})
export class CreatebugviewComponent implements OnInit {
onbugsubmit(){
if(this.createbugform.valid)
{
this.createbugform.controls['BugsAttachments'].setValue(this.images);
this.http.post(this.baseURI+'Bugs/Addbug',this.createbugform.value).subscribe(
(data:any) => {
this.dialogRef.close();
//this.changeLocation(),
this.snackbar.open(data.message,'✖', {
duration:4000,
horizontalPosition:'center',
verticalPosition:'top'
}),
//this.dialog.closeAll(),
localStorage.removeItem('ProjectId')/////////////////In this function I want to use ngOnit of ProjectBugsComponent Component.
}
)
}
}
如果有人需要任何其他信息,请在我将提供给您的评论中告诉我。将共享逻辑放入服务中,并将服务注入组件中 共享服务
@Injectable({
providedIn: 'root',
})
export class SharedLogicService {
sharedFunction(router): void {
console.log(router.routerState.snapshot.url, 'called')
}
}
组件A或组件B
constructor(private router: Router, private sharedLogicService: SharedLogicService){}
ngOnInit() {
this.sharedLogicService.sharedFunction(this.router);
}
好吧,你问的其实是一个坏习惯 这种不良做法的最短解决方案是:
ProjectBugsComponent
中创建一个静态公共方法(我们称之为uglyMethod()
)ProjectBugsComponent
的ngOnInit
逻辑移出到uglyMethod()
CreateBugsViewComponent
导入ProjectBugsComponent
并调用
ProjectBugsComponent.uglyMethod()
一般来说,最佳实践将是创建一个服务,将通用逻辑从
ngOnInit
转移到那里,并在需要时从两个组件调用它。最好遵循以处理组件之间的通信。Angular已经有了所描述的方法,但此方法不在列表中。但如果你真的想,这里有一个例子:
应用程序布局.component.ts
import { StudentsComponent } from './../students/students.component';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, } from '@angular/router';
@Component({
selector: 'app-layout',
templateUrl: './app-layout.component.html',
styleUrls: ['./app-layout.component.scss']
})
export class AppLayoutComponent implements OnInit {
constructor(private route: ActivatedRoute, private studentsC: StudentsComponent) {
}
ngOnInit(): void {
// calling NgOnInit in StudentComponent
this.studentsC.ngOnInit()
}
}
import { Component, Injectable, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-students',
templateUrl: './students.component.html',
styleUrls: ['./students.component.scss']
})
//**!!! important to add**
@Injectable({
providedIn: 'root',
})
export class StudentsComponent implements OnInit {
constructor(private router: Router) { }
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
ngOnInit(): void {
console.log(this.router.routerState.snapshot.url, 'called')
}
}
学生.component.ts
import { StudentsComponent } from './../students/students.component';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, } from '@angular/router';
@Component({
selector: 'app-layout',
templateUrl: './app-layout.component.html',
styleUrls: ['./app-layout.component.scss']
})
export class AppLayoutComponent implements OnInit {
constructor(private route: ActivatedRoute, private studentsC: StudentsComponent) {
}
ngOnInit(): void {
// calling NgOnInit in StudentComponent
this.studentsC.ngOnInit()
}
}
import { Component, Injectable, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-students',
templateUrl: './students.component.html',
styleUrls: ['./students.component.scss']
})
//**!!! important to add**
@Injectable({
providedIn: 'root',
})
export class StudentsComponent implements OnInit {
constructor(private router: Router) { }
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
ngOnInit(): void {
console.log(this.router.routerState.snapshot.url, 'called')
}
}
但这会导致我产生角度循环依赖,这对我的代码不好。这仍然不起作用,并显示角度依赖警告……你能告诉我如何做这个共享逻辑服务吗???我编辑我的答案