LWC - HTML - PARENT
<div class="slds-page-header__col-details">
<ul class="slds-page-header__detail-row">
<template if:true={hKeyFields}>
<template for:each={hKeyFields} for:item="field">
<li class="slds-page-header__detail-block" key={field.apiName}>
<div class="slds-text-title slds-truncate" title={field.label}>
<span>{field.label}</span>
<template if:true={field.object.inlineHelpText}>
<lightning-helptext content={field.object.inlineHelpText}></lightning-helptext>
</template>
</div>
<template if:false={field.object.reference}>
<div class="slds-truncate" title={field.record.displayValue}>{field.record.displayValue}</div>
</template>
<template if:true={field.object.reference}>
<c-relationship-link target-object-api={field.reference.value.apiName} target-label={field.reference.displayValue} target-id={field.reference.value.id} ></c-hl-relationship-link>
</template>
</li>
</template>
</template>
</ul>
</div>
LWC - HTML - CHILD
<template>
<a href={url} onclick={viewRecord} title={targetLabel}>{targetLabel}</a>
</template>
LWC - JS - CHILD
import { LightningElement, api, track} from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class RelationshipLink extends NavigationMixin(LightningElement) {
@api targetId;
@api targetLabel;
@api targetObjectApi;
@track url;
connectedCallback() {
//LL20190513 - Generate URL for viewing record page
this.relationshipRef = {
type: 'standard__recordPage',
attributes: {
recordId: this.targetId,
objectApiName: this.targetObjectApi,
actionName: 'view'
}
};
this[NavigationMixin.GenerateUrl](this.relationshipRef)
.then((url) => {
this.url = url;
});
}
viewRecord(evt){
evt.preventDefault();
evt.stopPropagation();
this[NavigationMixin.Navigate](this.relationshipRef);
}
}
Following solutions mentioned below and no luck:
Lightning Web Component - Navigation - Show Link in a List / Table to Open Record solution posted by @glls
Also note the Chrome console shows this:
aura_proddebug.js:237 [LWC warning]: Invalid event type "WireContextEvent" dispatched in element . Event name should only contain lowercase alphanumeric characters.
Output HTML
Chrome Debug Isolated
