Question

我基于Angular 7编写了一个非常简单的基于Bootstrap 4的组件。最终结果是：

一切正常，但是在Aurelia中，我们可以创建无容器组件。必须基于Bootstrap 4创建其他无法包装到非Bootstrap div元素中的组件。（角度div）

如何删除Angular元素的容器并在其中进行渲染？

Answer 1

您不能真的省略周围的容器，不。但是，您可以使用属性选择器创建组件：

public class ActivityHandlingFragments extends AppCompatActivity {

    // <!------------------------------------------ BEGINNING - Defining fragments instances -->
    SealsFragment fragment_seals = new SealsFragment();
    // <!------------------------------------------ END - Defining fragments instances -->

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_handling_fragments);

        final FragmentManager fragment_manager = getSupportFragmentManager();
        FragmentTransaction fragment_transaction = fragment_manager.beginTransaction();  // When app starts
        fragment_transaction.replace(R.id.scrollView, fragment_home);
        fragment_transaction.commit();

        NavigationView navigation_view = (NavigationView) findViewById(R.id.navigation_view);
        navigation_view.getMenu().getItem(0).setCheckable(true);
        navigation_view.getMenu().getItem(0).setChecked(true);

        final DrawerLayout drawer_layout = findViewById(R.id.drawer_layout);
        navigation_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                item.setChecked(true);
                drawer_layout.closeDrawers();

                // <!-------------------------------------- BEGINNING - NavigationView's routing -->
                FragmentTransaction fragment_transaction = fragment_manager.beginTransaction();
                switch(item.getItemId()) {
                    case R.id.menu_item_home_page:
                    case R.id.menu_item_my_seals:
                        fragment_transaction.replace(R.id.scrollView, fragment_seals);
                        break;
                }
                fragment_transaction.addToBackStack(null);
                fragment_transaction.commit();
                // <!-------------------------------------------- END - NavigationView's routing -->

                return true;
            }
        });

    }

您可以这样使用它：

@Component({
  selector: "[appFoo]",
  template: `<ng-content></ng-content>`,
})
export class AppFooComponent {}

这样，您可以确定使用组件时周围的容器应该是什么。您还可以将选择器进一步限制为<div appFoo>Hello!</div>等。

注意：默认情况下，Angular CLI项目中的codelyzer规则会为此提示错误，因为它要求组件使用组件选择器，但是您可以在tslint配置中将其禁用。

如何创建无容器的Angular 6+组件？

1 个答案: