如何将“历史”对象传递给 stencil.js 组件 <stencil-router>

如何解决如何将“历史”对象传递给 stencil.js 组件 <stencil-router>

我需要在组件（public class read extends JFrame { JTable table = new JTable(); JScrollPane pane; Object[] cols = null; public read() throws ClassNotFoundException,IOException { cols = new String[]{"c1","c2","c3",}; DefaultTableModel model = (DefaultTableModel) table.getModel(); model.setColumnIdentifiers(cols); File f = new File("words.txt"); FileInputStream fis = new FileInputStream(f); ObjectInputStream ois = new ObjectInputStream(fis); Object[] data = (Object[]) ois.readObject(); model.addRow(data); pane = new JScrollPane(table); pane.setBounds(100,150,300,300); setLayout(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); setLocationRelativeTo(null); setSize(500,500); } public static void main(String[] args) throws ClassNotFoundException,IOException { new read(); } } ）中使用历史对象，该组件呈现为 <app-nav> 的兄弟

但是根据我遵循的一些教程，我完全无法将History(Appnav)注入组件。我总是得到一个未定义日志。

结构如下：

app-root.tsx

<app-root>

app-nav.tsx

export class AppRoot {

  render() {
    return (
      <div>
        <header>
          <h1>Stencil App Starter</h1>
        </header>

        <main>
          <stencil-router>
            <stencil-route-switch scrollTopOffset={0}>
              <stencil-route url="/" component="app-home" exact={true} />
              <stencil-route url="/profile/:name" component="app-profile" />
            </stencil-route-switch>
          </stencil-router>
          
          <app-nav></app-nav>


        </main>
      </div>
    );
  }
}

package.json

import { Component,h,Prop } from '@stencil/core';
import { RouterHistory,injectHistory } from '@stencil/router';

@Component({
  tag: 'app-nav',shadow: false,})
export class Appnav {
  @Prop() history: RouterHistory
  render() {
    return (
      <div class="app-nav">
        <p>
         Mi navegacion 3
        </p>
        <button onClick={()=> this.draw()}>log history</button>
      </div>
    )
  }

  draw(){
      console.log(this.history);      
  }
}

injectHistory(Appnav)

知道为什么我总是未定义吗？ 提前致谢

解决方法

编辑： 抱歉，我应该更仔细地查看您的代码，您确实有 RouterHistory - 那么它不起作用的原因可能是您的组件（app-nav）在“模板路由器”之外（组件需要通过stencil-route component 道具 - 也可以与 routeRender() 道具一起使用？）

（在上面添加 EDIT 之前的原始回复）

对于 v1 路由器，您可以将 RouterHistory 作为 prop 传递给组件（组件需要被 stencil-route 包含并且您不需要显式传递它 - stencil 在后面为您做场景）

import { RouterHistory } from '@stencil/router';
@Prop() history: RouterHistory;

...

//then use it to manipulate history (say bound this function to button click)
goBackHistory() {
  this.history.goBack();
}

link to Stencil documentation (look under Navigating Programtically)