Angular2 - 在组件 class 中创建多个变量声明与在模板中直接使用 object

Question

I have a component which retrieves a large nested object from an http request. Within my component class, I declare hundreds of variables that extrapolate data from that object and those properties are then interpolated within its template.

This has resulted in my component class having hundreds of lines of code simply from those properties being declared and assigned. Would be better to just use the object itself within the template? The following is an example to demonstrate:

Let's say I have a really large and nested cuisines object that's coming in from a service. With my current approach, within the component class, I declare variables for the individual properties that I need:

let italianBreakfast = cuisine.data.breakfast.italian; let... let... let...

This is then interpolated within the template: <div>{{italianBreakfast}}</div>

My revised strategy is to simply use the object in the template:

<div>{{cuisine.data.breakfast.italian}}</div>

In doing so, the text between the curly brackets in my templates get larger, but I would gain in that I'm no longer declaring properties to store object values in my component class, which would result in saving hundreds of lines of code. Which would be better and is there a best practice around this?

Answer 1

You can create smaller components inside this large component and pass them specific parts of the cuisines object as @Input properties.