Odoo 16视图中添加Owl组件至Notebook新页面的问题

Odoo中Owl组件模板（stops.xml）和常规QWeb模板（templates.xml）的关联核心是组件代码绑定模板标识 + 模块配置加载资源，具体步骤如下：

• 1. 给stops.xml的Owl模板设置唯一标识
     在stops.xml里定义模板时，通过t-name指定唯一名称，并添加owl="1"标记这是Owl模板：

  <templates id="template" xml:space="preserve">
      <t t-name="my_module.StopsComponent" owl="1">
          <div>Hello World from Owl</div>
      </t>
  </templates>
  

• 2. 在Owl组件代码中绑定模板
     打开stops.js，在组件类里通过static template属性关联上述t-name：

  import { Component } from "@odoo/owl";
  
  export class StopsComponent extends Component {
      static template = "my_module.StopsComponent"; // 对应stops.xml的t-name
  }
  

• 3. 注册组件并配置资源加载
     在main.js里将组件注册到Odoo的组件注册表：

  import { registry } from "@web/core/registry";
  import { StopsComponent } from "./stops";
  
  registry.category("components").add("my_module.stops", StopsComponent);
  

  同时在manifest.py里确保加载所有相关文件：

  'data': [
      'templates.xml',
      'stops.xml',
      # 其他视图/数据文件
  ],
  'assets': {
      'web.assets_backend': [
          'my_module/static/src/js/main.js',
          'my_module/static/src/js/stops.js',
      ],
  },
  

  这样Odoo就能解析到stops.xml的模板，并和对应的Owl组件绑定。

直接在Form视图的Notebook中新增页面，通过QWeb的t-component标签调用已注册的Owl组件即可：

• 1. 修改templates.xml中的Form视图
     在原有Notebook节点下新增一个page，在page内部调用组件：

  <record id="your_model_form_view" model="ir.ui.view">
      <field name="name">your.model.form.view</field>
      <field name="model">your.model</field>
      <field name="arch" type="xml">
          <form>
              <!-- 原有Form内容 -->
              <notebook>
                  <page string="Vehicles">
                      <!-- 原有Vehicles页面内容 -->
                  </page>
                  <!-- 新增Owl组件页面 -->
                  <page string="Owl Demo">
                      <t t-component="my_module.stops"/> <!-- 对应main.js中注册的组件名称 -->
                  </page>
              </notebook>
          </form>
      </field>
  </record>
  

• 2. （可选）动态渲染hello world
     如果需要动态控制内容，可在stops.js中添加状态：

  import { Component, useState } from "@odoo/owl";
  
  export class StopsComponent extends Component {
      static template = "my_module.StopsComponent";
      setup() {
          this.state = useState({
              message: "Hello World"
          });
      }
  }
  

  然后在stops.xml模板中渲染状态值：

  <t t-name="my_module.StopsComponent" owl="1">
      <div><t t-esc="state.message"/></div>
  </t>
  

• 3. 生效验证
     升级模块后刷新页面，就能在Notebook的新页面看到Owl组件渲染的内容。

内容的提问来源于stack exchange，提问作者kpg