I have page with a list of products, and I want to pass product id to a product/:id router (I don't want to parse it from router url). What options do I have? Can I have something like Input()
to a router component?
相关问题
- Angular RxJS mergeMap types
- npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fs
- How to update placeholder text in ng2-smart-table?
- How to instantiate Http service in main.ts manuall
- Angular: ngc or tsc?
相关文章
- angular脚手架在ie9+下兼容问题
- angular 前端项目 build 报错 "Cannot find module 'le
- Angular Material Stepper causes mat-formfield to v
- After upgrade to Angular 9 cannot find variable in
- is there any difference between import { Observabl
- Suppress “Circular dependency detected” suppress w
- How can you get current positional information abo
- Angular material table not showing data
Let me get this right first!
You have a list of items and when you click on one, you need to redirect to a general route that displays the details in reference to the item id? You are looking for a way to pass the item id to the child component without passing it as a route parameter?
This is basically sharing data among components. There are 4 ways of doing that.
Parent to Child: Sharing Data via
Input
This is probably the most common and straightforward method of sharing data. It works by using the
@Input()
decorator to allow data to be passed via the template.Child to Parent: Sharing Data via
ViewChild
ViewChild
allows one component to be injected into another, giving the parent access to its attributes and functions. One caveat, however, is that the child won’t be available until after the view has been initialized. This means we need to implement theAfterViewInit
lifecycle hook to receive the data from the child.Child to Parent: Sharing Data via
Output()
andEventEmitter
This approach is ideal when you want to share data changes that occur on things like button clicks, form entries, and other user events.
In the parent, you can create a function to receive the message and set it equal to the message variable.
In the child, declare a
messageEvent
variable with the Output decorator and set it equal to a new event emitter. Then create a function namedsendMessage
that calls emit on this event with the message you want to send. Lastly, create a button to trigger this function.The parent can now subscribe to this
messageEvent
that’s outputted by the child component, then run the receive message function whenever this event occurs.Unrelated Components: Sharing Data with a Service (Recommended)
When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should you a shared service. When you have data that should always be in sync, I find the RxJS
BehaviorSubject
very useful in this situation.following is an example on the last approach!
I hope this approach works.
Good Luck!
Use as a path Variable
In app.routes.ts
How to use in html file
Here product.id is the value you wants to pass
How to use in in typescript file
Here this.product.id is the value you wants to pass
Use as a optional parameter
In app.routes.ts
How to use in html file
Here product.id is the value you wants to pass
How to use in in typescript file
Here this.product.id is the value you wants to pass
Use as a Query parameter
In app.routes.ts
How to use in html file
Here product.id is the value you wants to pass
How to use in in typescript file
Here this.product.id is the value you wants to pass