I have Blazor pages that are structured like so:
Index.razor:
<code>@page "/"
@layout PageTopComponents
<div>
<!-- html stuff here -->
</div>
@code {
// ...
}
</code>
<code>@page "/"
@layout PageTopComponents
<div>
<!-- html stuff here -->
</div>
@code {
// ...
}
</code>
@page "/"
@layout PageTopComponents
<div>
<!-- html stuff here -->
</div>
@code {
// ...
}
Results.razor:
<code>@page "/results"
@layout PageTopComponents
<div>
<!-- html stuff here -->
</div>
@code {
// ...
}
</code>
<code>@page "/results"
@layout PageTopComponents
<div>
<!-- html stuff here -->
</div>
@code {
// ...
}
</code>
@page "/results"
@layout PageTopComponents
<div>
<!-- html stuff here -->
</div>
@code {
// ...
}
PageTopComponents.razor:
<code>@inherits LayoutComponentBase
<div><Component1 /></div>
<div><Component2 /></div>
<div><Component3 /></div>
<div><Component4 /></div>
<div><Component5 /></div>
</code>
<code>@inherits LayoutComponentBase
<div><Component1 /></div>
<div><Component2 /></div>
<div><Component3 /></div>
<div><Component4 /></div>
<div><Component5 /></div>
</code>
@inherits LayoutComponentBase
<div><Component1 /></div>
<div><Component2 /></div>
<div><Component3 /></div>
<div><Component4 /></div>
<div><Component5 /></div>
In, say, Component3, I need to know whether or not I am in "/" or "/results" so I can display different information that is page specific.
I have a service with a bool that I can call to set or unset the boolean depending on which page I am on.
MyService.cs:
<code>public bool showData_A { get; set; } = false;
public bool showData_B { get; set; } = false;
public bool showData_C { get; set; } = false;
public bool showData_D { get; set; } = false;
</code>
<code>public bool showData_A { get; set; } = false;
public bool showData_B { get; set; } = false;
public bool showData_C { get; set; } = false;
public bool showData_D { get; set; } = false;
</code>
public bool showData_A { get; set; } = false;
public bool showData_B { get; set; } = false;
public bool showData_C { get; set; } = false;
public bool showData_D { get; set; } = false;
And I can successfully set it like so:
<code>[Inject]
MyService myService { get; set; }
protected override async Task OnInitializedAsync() {
myService.showData_B = true;
}
</code>
<code>[Inject]
MyService myService { get; set; }
protected override async Task OnInitializedAsync() {
myService.showData_B = true;
}
</code>
[Inject]
MyService myService { get; set; }
protected override async Task OnInitializedAsync() {
myService.showData_B = true;
}
However, I believe the PageTopComponents are getting loaded before the OnInitializedAsync is being called.
So, How can I get this to work?