将参数从我的主页发送到另一个页面

Question

export class HomeComponent implements OnInit {  
selectedStartDatee: Date;
id:number;
...
constructor(
 this.selectedStartDatee = new Date(this.datepipe.transform(this.datenow, 'MM.dd.yyyy HH:mm:ss'));
    this.selectedStartDatee.setDate(this.selectedStartDatee.getDate() - 7);
this.id=2;
)

btnshowAnotherComponenet(){}
}

export class AnotherComponent implements OnInit {  
@Input date:Date
@Input id:number
}

当我点击该按钮时，会在新选项卡中打开另一个页面，我想将 ID 和日期参数发送到从当前页面打开的页面。

Answer 1

你可以使用 navigation parameters.

当您导航到 HomeComponent 中的其他页面时，请使用

// create parameterized link
const url = this.router.serializeUrl(this.router.createUrlTree(['/path/to/other/page'], { queryParams: { id: 'id', date: 'date' } }));
// open link in new tab
window.open(url, '_blank');

然后在 AnotherComponent 中，订阅你的路由的 queryParams 并用它们做你想做的事：

// read in parameters
this.route.queryParams.subscribe(params => {
  this.id = params['id']
  this.date = params['date']
});

在第一个块中，router 是一个 Router 实例，在第二个块中 route 是一个 ActivateRoute 实例。

Answer 2

有两种方法。

您可以使用存储您的值的服务，并在下一页中使用该服务来检索该值。

export class HomeComponent implements OnInit {  

   selectedStartDatee: Date;
   id:number;

   constructor(yourService: YourService) { 

   }

   btnshowAnotherComponenet(){
      this.yourService.selectedStartDatee = selectedStartDatee;
      this.yourService.id = id;
      this.router.navigate(['/anotherComponent']);
   }
}

export class AnotherComponent implements OnInit { 
 
   selectedStartDatee: Date;
   id:number;

   constructor(yourService: YourService) { 
      this.selectedStartDatee = this.yourService.selectedStartDatee;
      this.id = this.yourService.id;
   }
}

您可以使用查询参数

btnshowAnotherComponenet() {
  const url = this.router.serializeUrl(this.router.createUrlTree(['/anotherComponent']], {
     queryParams: { 
       selectedStartDatee : this.selectedStartDatee,
       id: this.id
     } 
  }));
  window.open(url, '_blank');
}

在AnotherComponent中：

ngOnInit() {
    this.route.queryParams
      .subscribe(params => {
        this.id = params['id'];
        this.selectedStartDatee = params['selectedStartDatee']
      }
    );
  }

将参数从我的主页发送到另一个页面

Sending parameters from my home page to another page

typescript

primeng

angular