Pass an ID for Navigation in a Lightning Web Component

Question

I am working on my first, and pretty simple, Lightning Web Component. The component lives on the contact record page and displaying information from a custom object with a parent lookup relationship. That part is working fine.

But, I would also like to be able to include navigation to allow the user to click a button and view the parent record. I can not seem to figure out how to get the record Id into my event handler. I have tried numerous permutations and can't seem to get it to work.

I have gone through the @wire documentation and feel like I am still not getting this. I have imported the the Id the with import Owner_Id from '@salesforce/schema/Contact.New_Relationship_owner1__c';

Any thoughts on how I get this Id into my event handler successfully?

Here is my HTML

<template>
<lightning-card title="RelationshipOwner" icon-name="standard:partners">
    <lightning-button
            label="Go to Relationship Owner Record"
            onclick={navigateToOwner}
            class="slds-m-right_x-small"
    ></lightning-button>
    <div class="slds-m-around--medium">
        <!--show relationship owner when influencer is loaded-->
        <template if:true={contact.data}>
            <lightning-record-form object-api-name="relationship_owner__c"
                                   record-id={ownerId}
                                   layout-type="Compact"
                                    columns=2>
            </lightning-record-form>
        </template>
        <!--Data fails to load-->
        <template if:true={contact.error}>
            <div class="slds-text-color--error">
                An error occured while loading influencer data.
            </div>
        </template>

    </div>
</lightning-card>

Here is the JS

import { LightningElement, api, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import Owner_Id from '@salesforce/schema/Contact.New_Relationship_owner1__c';
const owner_fields = [Owner_Id];
export default class relationshipowner extends NavigationMixin(LightningElement) {
@api recordId; // relationship owner id
@wire(getRecord, { recordId: '$recordId', fields: owner_fields })
    contact;
    navigateToOwner() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.contact.owner_fields,
                objectApiName: 'relationship_owner__c',
                actionName: 'view'
            }
        });
    }
    get ownerId() {
        return getFieldValue(this.contact.data, Owner_Id);
    }
}

Answer 1

As an update. I went to the Dreamhouse App in the Sample Gallery and found the broker card. This had a pretty similar use case and I was able to use that example to make the event handler work.

<lightning-card title="RelationshipOwner" icon-name="standard:partners">

    <div class="slds-m-around--medium">
        <!--show relationship owner when influencer is loaded-->
        <template if:true={contact.data}>
            <lightning-button-icon
                icon-name="utility:expand_alt"
                slot="actions"
                onclick={handleNavigateToRecord}
             ></lightning-button-icon>
            <lightning-record-form object-api-name="relationship_owner__c"
                                   record-id={ownerId}
                                   fields={ownerfields}
                                    columns=2>
            </lightning-record-form>
        </template>
        <!--Data fails to load-->
        <template if:true={contact.error}>
            <div class="slds-text-color--error">
                An error occured while loading influencer data.
            </div>
        </template>

    </div>
</lightning-card>

JS Code:

import { LightningElement, api, wire, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import CONTACT_FIELD from '@salesforce/schema/Contact.New_Relationship_owner1__c';
import NAME_FIELD from '@salesforce/schema/relationship_owner__c.Name';
import EMAIL_FIELD from '@salesforce/schema/relationship_owner__c.email__c';
import TOTAL_INFLUENCERS from '@salesforce/schema/relationship_owner__c.Total_Influencers_DLRS__c';
import GRADE_FIELD from '@salesforce/schema/relationship_owner__c.Grade__c';
import REGION_FIELD from '@salesforce/schema/relationship_owner__c.Region_Lookup__c';

const Contact_Fields = [CONTACT_FIELD];
const Owner_Fields = [
    NAME_FIELD,
    EMAIL_FIELD,
    TOTAL_INFLUENCERS,
    GRADE_FIELD,
    REGION_FIELD
];
export default class relationshipowner extends NavigationMixin(LightningElement){
@api recordId; // relationship owner id

@track ownerfields = Owner_Fields;
@wire(getRecord, { recordId: '$recordId', fields: Contact_Fields })
    contact;

    get ownerId() {
        return getFieldValue(this.contact.data, CONTACT_FIELD);
    }
    handleNavigateToRecord()
    {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: this.ownerId,
                objectApiName: 'relationship_owner__c',
                actionName: 'view'
            }
        });
    }
}